ReactJS: What is the correct way to set a state value as array?

I have an array of object that get users data using fetch API. I have tried constructor, create a function, bind it. It didn’t work. I tried ComponentDidMount and setState, it returns undefined.

class Admin extends Component {

    componentDidMount () {

        var that = this;
        fetch('http://localhost:4500/data/users', {
            method: 'GET',
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
         }).then(function(response) {
             return response.json();
             that.state = {users: json};


    render() {

     return (


What is the correct way to set a state value as array and render it? Thanks

First initialize your state in your constructor like this

constructor(props) {
        this.state = {users : []} //initialize as array

Then instead of that.state = {users: json}; set your state using

that.setState({ users: json });

You should use the React setState() method.

that.setState({ users: json });

You already got the answer to use setState({ users: json }), which is right.

As an alternative to initializing the array value like abul said, you could also do a conditional render, depending on the component state. I.e you can render a different component if the users aren’t loaded yet.

render() {
   const users = this.state.users;
   return !users ?
      <p>Loading..</p> : 
      <YourComponent users={users} />;