score:0

Try the following code:

const data = [   {
    title: "Hello World",
    company: [
      "Google",
      "Apple",
      "Facebook"
    ]  
    } 
];

class App extends React.Component {   
  handleChange = (e) => {
    const target = e.target;
    const value = target.value;
    const name = target.name;
    data[0].company[+name] = value
  }

  render() {
    return (
      <ul>
        {data[0].company.map((item, index) => (
          <input type="text" onchange={this.handleChange} name={""+index} key={index} value={item}></input>
        ))}
      </ul>
    );   
  } 
}

ReactDOM.render(<App />, document.getElementById("app"));

I transform the index into input name and listen to the change on the input and I transform the index to an integer to replace the value in the array

score:1

Try the following :)

class App extends React.Component {
  state = {
    companies: data[0].company,
  };

  updateText = (e, index) => {
    const companies = [...this.state.companies];
    companies[index] = e.target.value

    this.setState({ companies });
  }

  render() {
    return (
      <ul>
        {this.state.companies.map((item, index) => (
          <input
            type="text"
            value={item}
            onChange={(e) => this.updateText(e, index)}
          />
        ))}
      </ul>
    );
  }
}

score:5

You should use state and controlled components for this. I strongly recommend you actually go through React's main concepts that are displayed to the right on their website as it will make your development process much easier.

To apply the controlled component principle to your current code, you need to have an onChange event bound to your input:

class App extends React.Component {
  state = {
    title: "Hello World",
    companies: [
      "Google",
      "Apple",
      "Facebook"
    ],
  };

  updateCompany(newName, index) {
    const { companies } = this.state;
    const newCompanies = [...companies];
    newCompanies[index] = newName;
    this.setState({ companies: newCompanies });
  }

  render() {
    const { companies } = this.state;
    return (
      <ul>
        {companies.map((item, index) => (
          <input type="text" key={index} value={item} onChange={(e) => this.updateCompany(e.target.value, index)}></input>
        ))}
      </ul>
    );
  }
}

Related Query

More Query from same tag