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

class App extends React.Component {
  render() {
    return (
      <ul>
        {data[0]pany.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).

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

class App extends React.Component {
  render() {
    return (
      <ul>
        {data[0].pany.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).

• javascript
• arrays
• reactjs

• 1 add a onchange event. read more here stackoverflow./questions/41736213/… – Code Maniac Commented Dec 13, 2018 at 15:35
• What @CodeManiac said. Your browser console should warn you about it. – Gbacc Commented Dec 13, 2018 at 15:37

3 Answers 3

You should use state and controlled ponents for this. I strongly remend 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 ponent 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",
    panies: [
      "Google",
      "Apple",
      "Facebook"
    ],
  };

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

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

Try the following :)

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

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

    this.setState({ panies });
  }

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

Try the following code:

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

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

  render() {
    return (
      <ul>
        {data[0].pany.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