How to append new value in existing array in React State?

Question

Following is my component definition.

I am receiving an input as Mistake Name and want to store it in array and display it.

import React, {Component} from 'react';


class AddMistake extends Component {

    constructor(props){
        super(props);
        this.state = {
            mistake: [],
            value: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.addMistake = this.addMistake.bind(this);
    }
    handleChange(event) {
        this.setState({value: event.target.value});
    }

    addMistake(event){
        this.setState({mistake: [].push(this.state.value)});
        console.log("Mistake is "+ this.state.mistake.length + " And Value is "+ this.state.value);
    }

    render(){
        return(
            <div>
                <input value={this.state.value} type='text' onChange={this.handleChange} /> 
                <button onClick={this.addMistake}> Add Mistake </button>
                <div>
                {this.state.mistake}
                </div>
                <div>{this.state.value}</div>

            </div>
        );
    }
} 

export default AddMistake;

Can someone recommend better way to handle this?

Omar K · Accepted Answer · 2018-05-02 17:36:06Z

2

addMistake(event){
   this.setState((prevstate) => ({mistake: prevstate.mistake.concat([this.state.value]))
}); 
   console.log("Mistake is "+ this.state.mistake.length + " And Value is "+ this.state.value);
}

In render method

 render(){
  return(
    <div>
     <input value={this.state.value} type='text' onChange={this.handleChange} /> 
     <button onClick={this.addMistake}> Add Mistake </button>
      <div>
       {this.state.mistake.length && this.state.mistake.map(item =><p> {item} </p>) }
      </div>
       <div>{this.state.value}</div>
     </div>
        );
    }

this.state.mistake.length checks if we have anything in the array.

edited May 2, 2018 at 17:36

answered Mar 27, 2018 at 23:10

Omar K

3,4213 gold badges25 silver badges41 bronze badges

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

9 Comments

Hamms Over a year ago

A suggestion: array.concat is a much easier way to update state

Omar K Over a year ago

mistake.concat(this.state.value) ?

Hamms Over a year ago

mistake.concat([this.state.value]); otherwise you'd end up adding each character of the string individually

Omar K Over a year ago

I see what you mean this.setState({mistake: this.state.mistake.concat([this.state.value]) })

Hamms Over a year ago

specifically, this.setState({mistake: this.state.mistake.concat([this.state.value])})

|

Ishan Patel · Accepted Answer · 2018-03-28 00:44:47Z

0

Following syntax worked for me! Thank you @omar and @Hamms

addMistake(event){
    this.setState({mistake: this.state.mistake.concat([this.state.value])
 }); 
    console.log("Mistake is "+ this.state.mistake.length + " And Value is "+ this.state.value);
 }

answered Mar 28, 2018 at 0:44

Ishan Patel

6,17112 gold badges53 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to append new value in existing array in React State?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related