React this.state undefined array

Question

I have an issue with React. I have an array that I pass to this.state. But I'm facing an issue, I can't access to the sub-elements in the array. In my case, I can't access to this.state.folders[0].

Here is my code :

class DriveContent extends Component {
    constructor () {
        super();
        let list_files = [];
        let list_folders = [];
        axios.get('/api/getFilesAndFolders').then((response) => {
            for (var i = 0; i < response.data.length; i++) {
              if (response.data[i]["isFile"] ==true){
                  list_files.push(response.data[i]);
              }
              else {
                  list_folders.push(response.data[i]);
              }
            }
        }).catch((error) => {
             console.error(error);
        });

       this.state = {files: list_files, folders: list_folders};
       console.log(this.state.folders);
       console.log(this.state.folders[0]);
    }

Here is what return the the 2 console.log :

// console.log(this.state.folders);
        []
    0: "Commun"
    1: "Privé"
    2: "Public"
    length: 3

//console.log(this.state.folders[0]);
    undefined

Thanks in advance !

Scott · Accepted Answer · 2017-11-25 16:06:58Z

3

You are setting state too soon. In your callback function you need to setState after assigning to list_files and list_folders since the callback is executed after the constructor has finished. Try this:

for (var i = 0; i < response.data.length; i++) {
     if (response.data[i]["isFile"] ==true){
       list_files.push(response.data[i]);
     }
     else {
       list_folders.push(response.data[i]);
     }
}
// setState here:
this.setState = {files: list_files, folders: list_folders};

Then move your console.logs to your render function to see the state being updated. Once on initial construction and once again after setState.

answered Nov 25, 2017 at 16:06

Scott

3,7712 gold badges29 silver badges44 bronze badges

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

2 Comments

Pierre Capo Over a year ago

It worked well, thanks a lot for the solution and the explanations !

Scott Over a year ago

Glad to hear it. It can be handy to always have this in your render function when developing: console.log('render', this.props, this.state); so you can watch all updates and also see if you need to optimize to reduce re-renders with a shouldComponentUpdate function.

Collectives™ on Stack Overflow

React this.state undefined array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related