React - update useState object properties with input

In this article, we would like to show you how to update property inside object returned by useState hook using input in React.

In both examples we've used:

• useRef hook - to create references to the input elements,
• ref keyword - to attach the references so we can later get values from the inputs with the reference.current.value.

1. Insert property

To insert property to the object inside useState, we use:

• spread operator (...) - to create new object, which is a copy of the existing user object and add new property to it.
• setUser - to update our state with the new object.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
  const [user, setUser] = React.useState({ id: 1, name: 'Tom', age: 23, email: 'tom@email.com' });
  const inputKeyRef = React.useRef();
  const inputValueRef = React.useRef();

  const handleInsert = () => {
    const newPropertyKey = inputKeyRef.current.value;
    const newPropertyValue = inputValueRef.current.value;
    setUser({ ...user, [newPropertyKey]: newPropertyValue });
  };

  return (
    <div>
      <p>Insert property key and value:</p>
      <p>{JSON.stringify(user, null, 4)}</p>
      <p>
        <input type="text" defaultValue="age" ref={inputKeyRef}></input>
        <input type="text" defaultValue="23" ref={inputValueRef}></input>
        <button onClick={handleInsert}>Add property</button>
      </p>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

2. Remove property

To remove property from the object inside useState, we use:

• spread operator (...) - to destructure our user object and create its copy - changedUser with all user properties except that specified with propertyKey, which stores the input reference value. That approach removes our age property.
• setUser - to update our user with the new object.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
  const [user, setUser] = React.useState({ id: 1, name: 'Tom', age: 23, email: 'tom@email.com' });
  const inputRef = React.useRef();

  const handleRemove = () => {
    const propertyKey = inputRef.current.value;
    const { [propertyKey]: propertyValue, ...changedUser } = user;
    setUser(changedUser);
  };

  return (
    <div>
      <p>{JSON.stringify(user, null, 4)}</p>
      <p>
        <input type="text" defaultValue="age" ref={inputRef}></input>
        <button onClick={handleRemove}>Remove property</button>
      </p>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Related posts

• React - update object inside useState

• React - object inside useState on click update

References

• Destructuring assignment - JavaScript | MDN
• Spread syntax (...) - JavaScript | MDN