How to add a new value to the end of an array using spread operator in ReactJs

Question

I have initialized the state as:

this.state = {
    buildingNames: []
}

Then , I am adding new values to my array inside my function as :

onClickAddBuildingTextBoxHandler = (inputData) => {
    this.setState({ buildingNames: [...this.state.buildingNames, inputData.value] });   
}

So, in my render function I am renderingthe values of the array as:

this.state.buildingNames.map((buildings, i) => {
    return (
        <div key={'building' + i}>
            <div className={classes.sceBuildingNameContainer}>
                <div className={classes.sceBenchmarkingBuildingName}>
                    {this.state.buildingNames} //its returning a single element
                </div>
                <button
                   className={classes.sceCloseIcon}
                   onClick={this.onClickDeleteBuildingIconHandler}>
                       <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
               </button>
            </div>
        </div>
}

So, what is currently happening is, the map function is not working properly. I mean the block is returning the same value twice. And when I add a new value, it gets appended to the previous state. So, if my image , if I add a new value again,, it will get appended after mnpq .What I want is to add the new values one after the other.How do I set the new state for that case?

Answer 1

You're using map to iterate over the elements in the buildings array. The first argument in the callback function is the current element, so change that from the plural buildings to building , and then reference that in your JSX {building} . In addition there's no need to prefix "building" to the key id.

this.state.buildingNames.map((building, i) => {
  return (
    <div key={i}>
      <div className={classes.sceBuildingNameContainer}>
        <div className={classes.sceBenchmarkingBuildingName}>
          {building}
        </div>
      </div>
    </div>
  );   
}

Answer 2

The first argument to the map function is a reference to the current element of the array map is looping on.

onClickAddBuildingTextBoxHandler = (inputData) => {
    const tempState = [...this.state.buildingNames];
    tempState.push(inputData.value);
    this.setState({ buildingNames: tempState });

  }



this.state.buildingNames.map((building, i) => {
    return (
        <div key={'building' + i}>
            <div className={classes.sceBuildingNameContainer}>
                <div className={classes.sceBenchmarkingBuildingName}>
                    {building} //Here you are refrencing the current element.
                </div>
                <button
                   className={classes.sceCloseIcon}
                   onClick={this.onClickDeleteBuildingIconHandler}>
                       <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
               </button>
            </div>
        </div>
}