How to push into an array on submit in reactjs?

Question

I am new to reactjs and trying to implement simple todo app. But, upon submit I am not able to push into an array i.e a state variable.

Following is my code:

import React, { Component } from 'react';


class ToDo extends Component{

constructor(props){
    super(props)
    this.state={list:['hello'],item:''}
    this.handleSubmit=this.handleSubmit.bind(this)
    this.handleSearchChange=this.handleSearchChange.bind(this)
}
handleSubmit(e){
    e.preventDefault();
    this.setState(state=>({list:(state.list.push(this.state.item))}))

}
handleSearchChange(e){
    this.setState({item:e.target.value})
}

render(){
    console.log('state:',this.state.list)
    let listing=this.state.list.map((item)=><li key={item}>{item}</li>)
    return(
            <div >
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                    <label>
                    <input className="form-control "type="text" value={this.state.item} onChange={this.handleSearchChange} />
                    </label>
                    <label>
                    <input type="submit" value="Submit" className="form-control" />
                    </label>
                    </div>
                </form>
                <ul>{listing}</ul>
            </div>

        )
}
}

export default ToDo;

When I try to click on submit it redirects to error. Help would be appreciated. Thanks.

Don't mutate state directly. make a copy of state and than push value into it and than use setState. — Code Maniac
– Code Maniac, Commented Dec 17, 2018 at 10:18

Psartek · Accepted Answer · 2018-12-17 13:03:56Z

3

try this:

handleSubmit(e){
        const { list, item } = this.state
        e.preventDefault();
        this.setState({ list: [...list, item] })
}

Explaination: you can't mutate data, concatenate it like this instead. Advice: use es6 functions always, so you will never need binding.

edited Dec 17, 2018 at 13:03

answered Dec 17, 2018 at 10:18

Psartek

4853 silver badges10 bronze badges

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

5 Comments

Gaurav Kumar Over a year ago

Thanks. Can u also tell i to do splice opertaion in same situation if i do have a index.

Psartek Over a year ago

Yeah I ll tell you if you select my answer as I answered before ;)

Gaurav Kumar Over a year ago

this.setState({list:[...this.state.list.splice(index,1)]}) will this work ?

Psartek Over a year ago

Its better to let the list this.state.list with full data. Then you could slice it when you call the state like this: this.state.list.slice().map((item)=><li key={item}>{item}</li>. Use slice instead splice because slice create a new array in contrary to slice (for immutability concern)

Psartek Over a year ago

also another advice, try to use const instead let for best practice, necessity of let is very rare (I almost never use it personally), because anyway your page rerender: const listing=this.state.list.map((item)=><li key={item}>{item}</li>.

AishuSuhan P · Accepted Answer · 2018-12-17 10:49:25Z

0

It's easy and helpful to you...

handleSubmit(e){
  const {list, item}=this.state;
  e.preventDefault();
  this.setState({ list: [...list, item] });
}

answered Dec 17, 2018 at 10:49

AishuSuhan P

1235 bronze badges

Collectives™ on Stack Overflow

How to push into an array on submit in reactjs?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related