CODEWITHSUNDEEP
reactjs
user2281858
user2281858

Reputation: 1997

react add empty object to array of objects in a state

I have a state:

this.state = {
    rowData
}

rowData = [
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
    {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"}
]

On a button click, I want to be able to add an empty object like this.

   rowData = [
        {MEMBER: "", ALIS: "", STATUS: ""},   //CLICK 1
        {MEMBER: "", ALIS: "", STATUS: ""},   // CLICK 2 and so on
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"},
        {MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3"}
    ]

How can I update the state to include empty strings on button clicks.

Upvotes: 1

Views: 1568

Answers (1)

cbr
cbr

Reputation: 13632

You can use the spread operator:

this.setState({
  rowData: [
    { MEMBER: "", ALIS: "", STATUS: "" },
    ...this.state.rowData
  ]
})

For example:

const rowData = [
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" },
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" },
  { MEMBER: "DATA1", ALIS: "DATA2", STATUS: "DATA3" }
];

class MyComponent extends React.Component {
  state = {
    rowData
  };

  handleClick = () => {
    this.setState({
      rowData: [
        { MEMBER: "", ALIS: "", STATUS: "" },
        ...this.state.rowData
      ]
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleClick}>Button</button>
        {this.state.rowData.map(({ MEMBER, ALIS, STATUS }, i) => (
          <p key={i}>
            Member: {MEMBER}, Alis: {ALIS}, Status: {STATUS}
          </p>
        ))}
      </>
    );
  }
}

Upvotes: 4

Related Questions