Dynamically Created Elements In React - How To Have Control?

This is a more general question. I need an idea to handle a problem, so I won't give you specific code. I have a list of items, that are output through a map function. Basically a

Solution 1:

That is pretty easy to realize in react.

You just need to keep the state in the component.

I show you a very simple mockup:

classItemextendsReact.Component {
  constructor(props) {
    super(props);
    this.state ={
      showInput: false,
      value: props.value
    }
  }

  triggerClick() {
    this.setState({showInput: true});
  }

  handleChange(value) {
    // do update value
  }

  render() {
    const {value, showInput} = this.state;
    return (
      <div><buttononClick={this.triggerClick}>show input</button>
        {showInput ?
          <inputtype="text"value={value}onChange={this.handleChange}/>
        : null}
        <p>{value}</p></div>
    );
  }
}

And then use what you mention map method to build it.

list.map(item =><Itemvalue={item.value}/>)

It would work as you need.