Dynamically generated inputs - part 3

catList.jsx

  renderList() {
    const {
      catList,
      showNewField,
    } = this.state;

    const nextIndex = catList.length;

    const listOfCustomHeaderField = catList.map((cat, index) => [
      <React.Fragment key={cat.generateKey}>
        <div className="Rtable-cell">
          <input
            type="text"
            value={this.getCatDataSafely(index, 'catName')}
            onChange={this.handleChangeOfCatDataFactory('catName', index, cat.generateKey)} 
          />
        </div>
        <div className="Rtable-cell">
          <input
            type="text"
            value={this.getCatDataSafely(index, 'catAge')}
            onChange={this.handleChangeOfCatDataFactory('catAge', index, cat.generateKey)}
          />
            <FontAwesomeIcon icon={faMinusCircle} className="icon-delete-wrapper" onClick={() => this.deleteCustomHeader(index)} />
        </div>
      </React.Fragment>
    ]);

    // do we need to add additional new empty row?
    if (showNewField) {
      const generateKey = this.generateKey(1, 100000);

      listOfCustomHeaderField.push([
        <React.Fragment key={generateKey}>
          <div className="Rtable-cell">
            <input
              type="text"
              value={this.getCatDataSafely(nextIndex, 'catName')}
              onChange={this.handleChangeOfCatDataFactory('catName', nextIndex, generateKey)}
              placeholder="Enter a cat name"
            />
          </div>
          <div className="Rtable-cell">
            <input
              type="text"
              value={this.getCatDataSafely(nextIndex, 'catAge')}
              onChange={this.handleChangeOfCatDataFactory('catAge', nextIndex, generateKey)}
              placeholder="Enter a cat age"
            />
          </div>
        </React.Fragment>
      ]);
    }

    return listOfCustomHeaderField;
  }