Can't read value from select tag in react JSX-CodePudding

delcare state object

const [addEmpData, setAddEmpData] = useState({
user_id:'',employee_id:'',name:'',date_of_join:'',gender:'',designation:'',user_role:''
                                                 })

here added value prop in select tag as addempData.gender. and a onchange fn that set the value to state.

                  <div className="col-sm-6">
                <div className="form-group">
                  <label className="col-form-label">Gender</label>
                  <select value={addEmpData.gender} onChange={(e)=>setAddEmpData({...addEmpData,gender:e.target.value})}  className="select">
                    <option value='select'>Select</option>
                    <option value="Male">Male</option>
                    <option value='Female'>Female</option>
                  </select>
                </div>
              </div>

CodePudding user response：

The proper implementation of controlled components in React base on your use case.

import { useState } from "react";

export default function App() {
  const [addEmpData, setAddEmpData] = useState({
    user_id: "",
    employee_id: "",
    name: "",
    date_of_join: "",
    gender: "",
    designation: "",
    user_role: ""
  });

  console.log(addEmpData);

  return (
    <div className="col-sm-6">
      <div className="form-group">
        <label className="col-form-label">Gender</label>
        <select
          value={addEmpData.gender}
          onChange={(e) =>
            setAddEmpData((prev) => ({ ...prev, gender: e.target.value }))
          }
          className="select"
        >
          <option value="select">Select</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
    </div>
  );
}

You may also interact the demo in the CodeSandbox just click here

CodePudding user response：

const [addEmpData, setAddEmpData] = useState({user_id:'',employee_id:'',name:'',date_of_join:'',gender:'',designation:'',user_role:''})
    function handler(e)
    {
      const {name,value}=e.target;
      setAddEmpData({
        ...addEmpData,
        [name]:value
      })
    }

<div className="form-group">
   <label className="col-form-label">Gender  : </label>
   <select value={addEmpData.gender} onChange={(e)=>handler(e)} name="gender" className="select">
      <option value='select'>Select</option>
      <option value="Male">Male</option>
      <option value='Female'>Female</option>
    </select>
</div>

You can try this code .
In this value will be read and changed in the state too
To try this code check this

CodePudding user response：

The Problem

Using the current state in the setState is an anti-pattern in React.js.

The Solution

Use the prevState inside your setState to destructuring the unchanged properties:

onChange={
  (e) => setAddEmpData((prevState) => {...prevState, gender:e.target.value})
}

Disclaimer

You can use any name instead of prevState but it must be the same on the left side and right side. prevState is just a paramere name but considered as a best practice to demonstrate the purpose of setState with the restructuring previous state.