react js update value from multiple radio and text box

user_4414277 0
Viewed 75

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.

reactjs node.js javascript
2 Answers

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.

user_66824060

You can use functional version of setState as:

Live Demo

Codesandbox 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 };
        })
      };
    });
  };
user_91534480
Related