react add empty object to array of objects in a state

Question

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.

cbr · Accepted Answer · 2021-01-15 00:15:18Z

4

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>
        ))}
      </>
    );
  }
}

edited Jan 15, 2021 at 0:15

answered Jan 15, 2021 at 0:09

cbr

13.8k3 gold badges43 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

react add empty object to array of objects in a state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related