react js update value from multiple radio and text box-CodePudding

I have an issue of updating state values of a particular key. Using multiple radio button and textbox.

Here is my state

this.state = {
        PStudent:[{"flag_sts":1,"id":8472229,"remark":null,"status":"P","studentid":"12010013"},
                  {"flag_sts":1,"id":8472218,"remark":null,"status":"P","studentid":"12108051"},
                  {"flag_sts":1,"id":8472219,"remark":null,"status":"P","studentid":"12108052"}
                ],
    };

On change value on radio:

const handleChange = (e,studentid) =>{
      this.setState({
        data: this.state.PStudent.map(item=>{
            if (item.studentid !== e.target.name) {
                return item;
            }else{
                return{
                    studentid: studentid,
                    status : e.target.value
                }
            }
        })
      })   
    }

And this is sending parameter form radio:

{(Object.keys(this.state.PStudent).length > 0) ? (
            this.state.PStudent.map((v)=>(
              <tr>
                <td>{v.studentid}</td>
                <td><input type="radio" name={v.studentid} value="P" onChange={(e)=>handleChange(e,v.studentid)} defaultChecked={(v.status == "P") ? true:false} /> </td>
                <td><input type="radio" name={v.studentid} value="A" onChange={(e)=>handleChange(e,v.studentid)} defaultChecked={(v.status == "A") ? true:false} /> </td>
                <td><input type="text" name="remarks" value="" /> </td>
              </tr>
            ))
          ) : ''}

Would you like to help me how to update some value of particular key? In this case i would like to update value from key 'status' by radio button and key 'remarks' by text box. And object from PStudent will auto updated with the new value after do handleChange() by radio. Thank you for your consider.

CodePudding user response：

You may want to make use of the dynamic key and index here.

The dynamic key would allow you to reuse the same function for the value change.

The index can be used to identify the object's index in the array.

const handleChange = (e, index, field) =>{
  const newPStudent = _.cloneDeep(this.state.PStudent);  // or you can use this.state.PStudent.map(i => I);
  newPStudent[index][field] = e.target.value
  this.setState({PStudent: newPStudent})
}



{(Object.keys(this.state.PStudent).length > 0) ? (
        this.state.PStudent.map((v, index)=>(
          <tr>
            <td>{v.studentid}</td>
            <td><input type="radio" name={v.studentid} value="P" onChange={(e)=>handleChange(e, index, 'status')} defaultChecked={(v.status == "P") ? true:false} /> </td>
            <td><input type="radio" name={v.studentid} value="A" onChange={(e)=>handleChange(e, index, 'status')} defaultChecked={(v.status == "A") ? true:false} /> </td>
            <td><input type="text" name="remarks" value="" onChange={(e)=>handleChange(e, index, 'remark')}/> </td>
          </tr>
        ))
      ) : ''}

If you are using underscore.js in your project, it's best to use _.cloneDeep() as it creates an independent copy of the object.

CodePudding user response：

You can use functional version of setState as:

Live Demo

  handleChange = (e, studentid) => {
    const status = e.target.value;
    this.setState((state) => {
      return {
        PStudent: state.PStudent.map((item) => {
          if (item.studentid !== e.target.name) return item;
          else return { ...item, status };
        })
      };
    });
  };