React - how to add new element in array type state?

Question

I have refereed this , this and this link to find solution but none of them work for me.

I have decleared state with array type and other state with null.

this.state = {  from: '', to: '',journeyDate: '',searchDetails: [] }

As user fill up search form with source city , destination city and journey date I set these state like below .

    let from = this.state.from;
    let to = this.state.to;
    let journeyDate = moment(this.state.journeyDate).format('YYYY-MM-DD');

final step to push these all variables into searchDetails array state. for that I have tried below options but none of them worked.

OPTION 1

this.setState({ searchDetails: [...this.state.searchDetails, from] });

OPTION 2

this.setState(prevState => ({
            searchDetails: [...prevState.searchDetails, from]
        }))

OPTION 3

let newState = this.state.searchDetails.slice();
        newState.push(from);

        this.setState({
            searchDetails: newState
        });
      console.log('final state is : ' + this.state.searchDetails);

every time console log remains empty.

any advice ?

Can you provide complete code of your component ? Also, did you check and from, to and journeyDate have values? I see you taking these values from state and updating the array (searchDetails), but where you are pushing values into state ? — Umesh
– Umesh, Commented Nov 20, 2017 at 5:26
@Umesh from , to and journeyDate state are set perfectly and I have console them too. So there is not an issue. — Dhaval
– Dhaval, Commented Nov 20, 2017 at 5:29

Prakash Sharma · Accepted Answer · 2017-11-20 05:27:33Z

2

Actually setState is an asynchronous method. That means right after writing setState, you cannot expect the state to be changed immediately. So console.log right after setState may show you last state instead of new state. If you want to log the updated state then use the callback of setState which is called when state is updated like this

this.setState({ searchDetails: [...this.state.searchDetails, from] }, () => { 
    console.log(this.state.searchDetails)
});

answered Nov 20, 2017 at 5:27

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Try :

this.setState({
    searchDetails: newState // use any of your 3 methods to set state
},() => {
     console.log('final state is : ' + this.state.searchDetails);
});

setState() does not always immediately update the component. It may batch or defer the update until later.

This makes reading this.state right after calling setState() a potential pitfall.

Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

For More Detail, Please read : https://reactjs.org/docs/react-component.html#setstate

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 20, 2017 at 5:27

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

2 Comments

Dhaval Over a year ago

on form submit I want to set searchDetails state and want to access this set in next page as a this.props.searchDetails. so my question is can I get value of searchDetails state in next page as a this.props.searchDetails ?

Vivek Doshi Over a year ago

Read this : stackoverflow.com/questions/43455200/…

Collectives™ on Stack Overflow

React - how to add new element in array type state?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related