Adding objects to an array on submitting a form in React

Question

I'm new to React and I'm trying to add objects one by one to an array in state when I submit a form but I only get one object in the array, here's a code snippet for that:

MY STATE

state = {
    comments: [],
    text: ""
  };

HANDLE FORM SUBMIT

 handleSubmit = event => {
    event.preventDefault();
    const arr = [];
    arr.push({ name: this.state.text, id: Math.random() });
    this.setState({ comments: arr, text: "" });
  };

RENDER METHOD

<form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.text}
            onChange={e => this.setState({ text: e.target.value })}
          />
          <ul>{this.renderComments()}</ul>
        </form>

baqazan · Accepted Answer · 2020-04-02 18:33:18Z

1

Thats because every time you run handleSubmit function you create new empty array, push one new comment onto it and then replace whole comments field in state with it. To make it work just read from state what currently is held in comments array and push onto it instead of creating new one.

answered Apr 2, 2020 at 18:33

baqazan

111 bronze badge

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

1 Comment

Arar Over a year ago

I agree with you, this line const arr = []; needs to be updated to be const arr = this.state.arr

Abdullah Abid · Accepted Answer · 2020-04-02 18:47:19Z

0

That's because every time handleSubmit is called the arr is initialized to an empty array,Remove the arr array and on submit spread the comments array and add the item

 handleSubmit = event => {
  event.preventDefault();
  this.setState({
   comments: [...this.state.comments,
   { name:this.state.text, id: Math.random() }
   ],text: ""});
 };

CodeSandbox here

edited Apr 2, 2020 at 18:47

answered Apr 2, 2020 at 18:36

Abdullah Abid

1,6613 gold badges12 silver badges24 bronze badges

Comments

Henfs · Accepted Answer · 2020-04-03 00:11:46Z

0

To avoid to replace values in everytime, handle submit:

handleSubmit = event => {
    event.preventDefault();

    arr.push({ name: this.state.text, id: Math.random() });
    this.setState({ ...state, comment: [...state.comments, { name: this.state.text, id: Math.random() }] });
  };

edited Apr 3, 2020 at 0:11

Henfs

5,45912 gold badges33 silver badges48 bronze badges

answered Apr 2, 2020 at 19:12

Danyal

11 bronze badge

Collectives™ on Stack Overflow

Adding objects to an array on submitting a form in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related