Unable to update react state from user input data

Question

  import React, { Component, Fragment } from "react";
  import "./App.css";


  export default class App extends Component {
    constructor(props){
      super(props)
      this.state = {
        data: [
          {
            id: 1,
            Firstname: "Jill",
            Lastname: ["john", "hobss", "smith"],
            Age: [1, 2, 3],
            company: ["facebook", "google", "netflix"],
            skills: ["python", "java", "scala"]
          },
          {
            id: 2,
            Firstname: "Jill",
            Lastname: ["john", "hobss", "smith"],
            Age: [1, 2, 3],
            company: ["facebook", "google", "netflix"],
            skills: ["python", "java", "scala"]
          },
          {
            id: 3,
            Firstname: "Jill",
            Lastname: ["john", "hobss", "smith"],
            Age: [1, 2, 3],
            company: ["facebook", "google", "netflix"],
            skills: ["python", "java", "scala"]
          },
          {
            id:4,
            Firstname: "Jill",
            Lastname: ["john", "hobss", "smith"],
            Age: [1, 2, 3],
            company: ["facebook", "google", "netflix"],
            skills: ["python", "java", "scala"]
          }
        ]
      }
    }

    handleChange = (id, company, event) => {
      const data = this.state.data;
      for(let d of data){
        if(d.id === id){
          for(let c of d.company){
            if(c === company){
              c = event.target.value
            }
          }
        }
      }
    }


    render() {
      return (
        <div>
        <table>
          <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>company</th>
              <th>skills</th>
          </tr>
          {
            this.state.data.map(td => {
              return (
                <tr>
              <td>{td.Firstname}</td>
              <td>
                <table>
                    <tr>
                      <td>{td.Lastname[0]}</td>
                      <td>{td.Lastname[1]}</td>
                      <td>{td.Lastname[2]}</td>
                    </tr>
                </table>
              </td>
              <td>
                <table>
                    <tr>
                      <td>{td.Age[0]}</td>
                      <td>{td.Age[1]}</td>
                      <td>{td.Age[2]}</td>
                    </tr>
                </table>
              </td>
              <td>
                <table>
                    <tr>
                      <td>
                        <input type="text" value={td.company[0]} onChange={(e) => this.handleChange(td.id, td.company[0], e)} />
                      </td>
                      <td>
                        <input type="text" value={td.company[1]} onChange={(e) => this.handleChange(td.id, td.company[1], e)}/>
                      </td>
                      <td>
                        <input type="text" value={td.company[2]} onChange={(e) => this.handleChange(td.id, td.company[2], e)}/>
                      </td>
                    </tr>
                </table>
              </td>
              <td>
                <table>
                    <tr>
                      <td>{td.skills[0]}</td>
                      <td>{td.skills[0]}</td>
                      <td>{td.skills[0]}</td>
                    </tr>
                </table>
              </td>
          </tr>
              )
            })
          }
        </table>
        </div>
      )
    }

  }

Here i am trying to update my table using input data .

I am sending data using event to handleChange() function and changing data of state.

But It is not working please have a look.

I am not able to change input value also.

Please have a look if any way to solve this issue.

Thanks

I am sending data using event to handleChange() function and changing data of state.

But It is not working please have a look.

I am not able to change input value also.

Please have a look if any way to solve this issue.

Thanks

Answer 1

You should replace the value attribute of the input with defaultValue so it can be changed in the first place, then use setState in your handleChange method to update the data.

Answer 2

You are currently mutating state which is an anit-pattern in react. In order to update state you need to call this.setState(newState) which will then trigger your component to rerender with the new state values;