how to update input text which is render by array map in REACTJS

Question

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

class App extends React.Component {
  render() {
    return (
      <ul>
        {data[0].company.map((item, index) => (
          <input type="text" key={index} value={item}></input>
        ))}
      </ul>
    );
  }
}

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

it renders perfectlly but when i am trying to edit its not editing the text. (not editable) and if i add one more input to same array with blank area value it also not working (not updated).

Answer 1

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>
    );
  }
}

Answer 2

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

Answer 3

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>
    );
  }
}