React: DRY Functional component set state with variable-CodePudding

I have a series of Input components and want to use only one onChange function.

Within a Class component I know I am able to do something like the following to adapt to the different states:

inputChange(input) {
    this.setState({
      [input.name]: input,
    });
  }

How, within a functional component, can I update state with only one onChange function?

Example of a component:

function Form(){
  const [selectedClient, updateSelectedClient] = useState(null);
  const [selectedLocation, updateSelectedLocation] = useState(null);
 

  return(

   <input
     value={selectedClient}
     id="selectedClient"
     name="selectedClient"
     onChange={???}
   />
   <input
    value={selectedLocation}
    id="selectedLocation"
    name="selectedLocation"
    onChange={???}
  />
  );
}

Thank you for the time!

CodePudding user response：

Since this is one form I would combine the states into one, initialising it with an object, and then when the onChange handler is called update the property identified by the input id with the value.

useEffect is used here to log the result of updating the state.

const { useEffect, useState } = React;

function Example() {

  const [form, setForm] = useState({});

  useEffect(() => {
    console.log(form);
  }, [form])

  function handleChange(e) {

    // Grab the id and value from the input
    const { id, value } = e.target;

    // Create a new object by spreading out the current form
    // state, and setting the state property to the new value
    setForm({ ...form, [id]: value });
  }

  return (
    <div>
      Client: <input
        value={form.client}
        id="client"
        name="client"
        onChange={handleChange}
      />
      Location: <input
        value={form.location}
        id="location"
        name="location"
        onChange={handleChange}
      />
    </div>
  );

}

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

input { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

use the same method you used in the class, the difference is you combine the client and location into one object which will represent the state, and you take advantage of the ids:

const {useState} = React;
function Form(){
  const [selectedClientOrLocation,setSelectedClientOrLocation] = useState({
  selectedClient:"",
  selectedLocation:""
})
  
  const handleChange = (e) =>{
    setSelectedClientOrLocation({...selectedClientOrLocation,[e.target.id]:e.target.value})
  }

  return(
  <form>
    <label htmlFor="selectedClient">
    Client
      <input
           value={selectedClientOrLocation.selectedClient}
           id="selectedClient"
           name="selectedClient"
           onChange={handleChange}
         />
    </label>
   <br/>
   <label htmlFor="selectedLocation">
   Location
     <input
          value={selectedClientOrLocation.selectedLocation}
          id="selectedLocation"
          name="selectedLocation"
          onChange={handleChange}
    />
   </label>
 
  </form>
  )
}

ReactDOM.render(<Form/>,document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>