State in componentDidMount always null, there should be data from the task variable

Question

I have a problem, every i call state "modalData" in componentDidMount, state always null, there should be data from the task variable.

constructor(props){
    super(props);
    this.tasksRef = firebase.database().ref('/users/'+ this.props.card_id);
    this.state = {
        modalData : null,
    }
}

componentDidMount(tasksRef){
    var task = [];
    tasksRef.on('value', (dataSnapshot) => {
        task.push({
            about : dataSnapshot.val().about, 
            card : dataSnapshot.val().card,
            company : dataSnapshot.val().company,
            first_name : dataSnapshot.val().first_name,
            job_title : dataSnapshot.val().job_title,
            last_name : dataSnapshot.val().last_name,
            photo : dataSnapshot.val().photo,
            role : dataSnapshot.val().role,
            thumbnail : dataSnapshot.val().thumbnail,
            title : dataSnapshot.val().title,
            website : dataSnapshot.val().website,
            _key : dataSnapshot.key
        });
        console.log('dataSnapshot.val().first_name : ' + dataSnapshot.val().first_name);
    });
    console.log(task); //there is data
    this.setState({
        modalData : task,
    });
    console.log(this.state.modalData); //there is no data
}

componentDidMount method does not take argument https://reactjs.org/docs/react-component.html#componentdidmount — Kunukn, Dec 05 '17 at 07:57

score 3 · Answer 1 · edited Dec 05 '17 at 08:29

3

setState is asynchronous, so you'll need to add a callback to display the console.log i.e.,:

this.setState({ modalData: task }, () => console.log(this.state));

setState Docs

edited Dec 05 '17 at 08:29

notgiorgi

1,691
12
27

answered Dec 05 '17 at 08:00

rrd

5,789
3
28
36

If like that, how can i call state in component ? ex : {this.state.modalData.first_name} – Syarofan Zahroni Dec 05 '17 at 08:12
getting the state is synchronous, setting it is not. – notgiorgi Dec 05 '17 at 08:13

score -1 · Answer 2 · answered Dec 05 '17 at 08:26

-1

Logging it after setting won't work. You can use

 this.state.modalData = task

, then logging it . That would work. for your logging.

answered Dec 05 '17 at 08:26

xSkrappy

747
5
17

You shouldn't directly modify the state, that's incorrect. – notgiorgi Dec 05 '17 at 08:41

State in componentDidMount always null, there should be data from the task variable

2 Answers2