title: How to generate an array for each input value from textBox in reactJs
body: <p>I have a textBox which will allow me to enter the building name and after I click on 'Add Building' button, it takes the value and passes it to the next page.So, in my screenshot below, the values  'AbsBuildingOne' and 'AbsBuildingTwo' comes from the textBox input.So, currently I am able to pass a single value from  the textBox to the next page, but I am not able to understand if I want to enter the second building how do I save the previous value in this page and add the second value below it. I guess I have to do it with arrays, but I am not able to figure it out how to proceed.</p>
  
  <p><a href="https://i.stack.imgur.com/bLWpN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bLWpN.png" alt="building"></a></p>
  
  <p>Currently, my code looks as shown below for passing the single value.I have added a state:</p>
  
  <pre><code>   this.state = {
                   textBoxValue: '',
                  };
  </code></pre>
  
  <p>So, in my textBox the onUpdateHandler function looks like this:</p>
  
  <pre><code> onClickAddBuildingTextBoxHandler = (inputData) =&gt; {
      this.setState({ textBoxValue: inputData.value});
    }
  </code></pre>
  
  <p>My textBox component looks like this.Its a custom textBox designed for the project:</p>
  
  <pre><code>         &lt;SceTextBox
              placeholder='Enter Building Name'
              id='AddBuilding'
              type='buildingName'
              maxLength='40'
              onTextUpdatedHandler={this.onClickAddBuildingTextBoxHandler.bind(this)}
              forceValidate={this.state.forceValidate}
              validator={app.appUtil.validator}
              isError={this.state.textBoxEmptyError}
              errorMsg={this.errorMessage}
            /&gt;
  </code></pre>
  
  <p>So, currently I am passing the value of <code>this.state.textBoxValue</code> to my next component where the building names are displayed.</p>
  
  <p>So, how do I proceed with multiple values and how do I save all the building names? Also, I have to delete the building name when i click on close icon. So do I have to work with push/pop in array? Someone please guide me with this.</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>My new state looks like this:</p>
  
  <pre><code>this.state = {
        buildingNames: {
          [id++]: ''
        }
      };
  </code></pre>
  
  <p>Both my functions are:</p>
  
  <pre><code>  onClickAddBuildingButtonHandler = () =&gt; {
      const { buildingNames } = this.state;
      this.setState({
        buildingNames: {
          ...buildingNames,
          [id++]:''
        }
      });
  
      if (!this.state.selectedOptions) {
        this.setState({ isRadioEmptyError: true });
  
        if (!this.state.buildingNames.id) {
          this.setState({ textBoxEmptyError: true });
        }
      }
  
      if (this.state.selectedOptions &amp;&amp; this.state.buildingNames) {
        this.props.navigateToAddBuilding(this.state.buildingNames);
      }
    }
  
  
  
  
  
    onClickAddBuildingTextBoxHandler = (inputData) =&gt; {
      const { buildingNames } = this.state;
      this.setState({ 
        buildingNames:{
          ...buildingNames,
          [inputData.id] : inputData.value
        }
      });
    }
  </code></pre>