单击签入反应时，将行数据存储为处于状态的对象数组

Question

<table className="table sm-td table-bordered mt-2">
          <tbody>
            {step1response.skills.length? (
              step1response.skills.slice(0, 5).map((t) => (
                <tr key={t}>
                  <td>
                    <input type="checkbox" onChange={handleSkills}/>
                  </td>
                  <td>{t}</td>
                  <td>
                    <select name="skill_type" className="custom-input p1" onChange={handleChange}>
                      <option>Select</option>
                      <option value="Must Have" selected>Must have</option>
                      <option value="Nice to have">Nice to have</option>
                    </select>
                  </td>
                  <td>
                    <select name="level_type" className="custom-input p1" onChange={handleChange}>
                      <option>Select</option>
                      <option value="Distinguished level" selected>Distinguished Level</option>
                      <option value="Novice level">Novice Level</option>
                    </select>
                  </td>
                </tr>

So i am mapping through an array which have skills names in it...i want the user to select the level and skill type in the other two select dropdowns in the table row. I am not able to figure out how can i store the selected row data when user clicks on that checkbox and gather the values whatever he has selected so my state can look like:

const [state,setState] = useState([{
name:"",
skill_type:"",
level_type:""
}])

Answer 1

you need to add properties to each object of skills on drop down selection like this :

handleChangeSkillType =(e)=>{
   skills[index].skill_type=e.target.value
}
handleChangeLevelType =(e)=>{
   skills[index].level_type=e.target.value
}
handleSkills=(e,index)=>{

   // you will be able to access slected row value here by skills[index]

}

And while calling onChange pass index as parameter for all like :

onChange={(e)=>handleChangeLevelType(e,index)}
onChange={(e)=>handleSkills(e,index)}
onChange={(e)=> handleChangeLevelType(e,index)}

and pass index to map function

step1response.skills.slice(0, 5).map((t,index) =>