CODEWITHSUNDEEP
arraysreactjs
Ishan Patel
Ishan Patel

Reputation: 6091

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

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?

Upvotes: 0

Views: 1855

Answers (2)

Omar
Omar

Reputation: 3411

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.

Upvotes: 2

Ishan Patel
Ishan Patel

Reputation: 6091

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

Upvotes: 0

Related Questions