How to insert data in array in react js?

Question

I'm using react.js and I have class base component. Now the scenario is. I have one array with the name of partitions.

partitions=["P1","P2","P3"]

and I have another array with the name dayDetails which is null at the start.

When my components mounts. I map partitions array and add an object in dayDetail array. Number of elements in partition array will be the number of objects put in the dayDetail array. Now the problem is only One object is putting in the dayDetail but it suppose to add three because number of partitions are 3.

here is my code below.

import React from "react";

class Step2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        partitions:["P1","P2","P3"],
        dayDetails:[],

    };
  }


  componentDidMount() {
    this.setTimePriceNullJson()
  }

  setTimePriceNullJson = () => {
    {this.state.partitions.map((item,index)=>( 
       this.setState({dayDetails:[...this.state.dayDetails,
        {
          "partitionIndex":index,
          "timings":[
              {"name":"sunday"}
          ],
          "pricings":[
              {"name":"sunday"}
          ]
        }
        
      ]})
    )
    )}
    
  }

  componentDidUpdate(){
    console.log("--> ",this.state.dayDetails)

  }


  render() {
    return (
      <div style={styles.main_container}>
        ...
      </div>
    )
  }
}

export default Step2;

Right now output is coming: this.state.dayDetail output is :

[{"partitionIndex": 2, "pricings": [[Object]], "timings": [[Object]]}]

Desire output is:

[
{"partitionIndex": 0, "pricings": [[Object]], "timings": [[Object]]},
{"partitionIndex": 1, "pricings": [[Object]], "timings": [[Object]]},
{"partitionIndex": 2, "pricings": [[Object]], "timings": [[Object]]}
]

Sergey Sosunov · Accepted Answer · 2022-08-08 22:05:25Z

1

Just do everything step by step. It will be much shorter and easier to read.

setTimePriceNullJson = () => {
  const dayDetails = this.state.partitions.map((x, i) => {
    return {
      partitionIndex: i,
      timings: [{ name: "sunday" }],
      pricings: [{ name: "sunday" }]
    };
  });
  this.setState({ ...this.state, dayDetails: dayDetails });
};

Clarifications: setState is not reflecting changes to the state object immediatelly, in each iteration of map function state.dayDetails was an empty array, so ...this.state.dayDetails was always [], and thats why only last value was set there.

edited Aug 8, 2022 at 22:05

answered Aug 8, 2022 at 21:49

Sergey Sosunov

4,6502 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ahmed Yasin Over a year ago

It worked! But I didn't get that where I was doing wrong.

Ahmed Yasin Over a year ago

I mean i think i was doing a same thing in different way.

Sergey Sosunov Over a year ago

@dummyfirst setState is not reflecting changes to the state object immediatelly, in each iteration of your map function state.dayDetails was an empty array, so ...this.state.dayDetails was always [], and thats why only last value was set there

Sergey Sosunov Over a year ago

@dummyfirst Just add a console.log("i", index, this.state); before ` this.setState({...` in your map function (with adding additional { brakes }) and take a look how your state looks on each iteration

Collectives™ on Stack Overflow

How to insert data in array in react js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related