Adding elements dynamically in React.js?

Question

React

Good afternoon!
There is a task to draw a form of a memo, where in the "To:" field there can be from one to several recipients. Using react.js, I draw a form where I add a "To" button and one field  <input>.
I want to add more recipients when this button is pressed, but I don’t understand how to do this through react.js or is it necessary to do it through other libraries?

Answer 1

let Form = React.createClass({
  getInitialState() {
    return {
      fieldsCount: 1
    };
  },
  _addField() {
    this.setState({ fieldsCount: this.state.fieldsCount + 1 });
  },
  render() {
    let fields = [];

    for (let i = 0; i < this.state.fieldsCount; i++) {
      fields.push(<input />);
    }

    return (
      <form>
        {fields}
        <button onClick={this._addField}>+</button>
      </form>
    );
  }
});

Answer 2

Dynamic elements, input autofocus and other standard issues are covered in the react.js course for beginners in Russian.