Question

0

126

Views

Can't read value from select tag in react JSX

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>

almost 3 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T04:35:18.920Z

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

Answer 2 · 2022-07-11T04:35:18.940Z

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

Answer 3 · 2022-07-11T04:35:18.957Z

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.

0

126