Best way to update an array of state? React

JavaScript
1

Hello, I’ve started working on the Twitch project, however I wonder what is the best way to update my state after I’ve performed the request to the Twitch API.

Should I be pushing the new data to the array?

So far, I’m using this code to get the data (it works)

  constructor(props) {
    super(props);
    this.state = {
      users: ['esl_csgo', 'Bajheera', 'Swifty']
    }
  }

  componentWillMount() {
    const TWITCH_API = 'https://api.twitch.tv/kraken/users/';
    const CLIENT_ID = '?client_id=XXXX';
    let { users } = this.state;
    for (let i = 0; i < users.length; i++) {
      axios.get(`${TWITCH_API}${users[i]}${CLIENT_ID}`)
      .then(res => {
        console.log(res);
       })
       .catch(err => {
         console.log(err);
       })
    }
  }

Then how should I go about updating each one of them? What is the best method?

I thought about renaming it to names and then create a new array streamers, then, every time I do a request, I would copy the previous state ...state and append the data from the request.

What do you guys think about this approach?

EDIT: This I what I ended up doing, not sure if it’s correct:

  constructor(props) {
    super(props);
    this.state = {
      users: ['esl_csgo', 'Bajheera', 'Swifty'],
      streamers: []
    }
  }

  componentWillMount() {
    const TWITCH_API = 'https://api.twitch.tv/kraken/users/';
    const CLIENT_ID = '?client_id=XXXX';
    let { users } = this.state;
    for (let i = 0; i < users.length; i++) {
      axios.get(`${TWITCH_API}${users[i]}${CLIENT_ID}`)
      .then(res => {
        this.state.streamers.push(res.data);
        console.log(res);
       })
       .catch(err => {
         console.log(err);
       })
    }
  }
2

Your approach is good, but I would like to see how you use this informations in render () because I think you can make another component to display the user’s info and this last component will get async info for each users without using mixed array.

3

My idea was to then map over each element and render a component passing the data as props, what do you think?

4

Ok, maybe I can explain myself better with a bit of code :smile:

const UserInfo = React.createClass ({
  getInitialState () {
    return { user: null }
  },
  componentDidMount () {
    someAjaxRequest (link, { name: this.props.name }, (result) => {
      result = validateOrOthersActionForResult (result);

      this.setState ({ user: result });
    });
  },
  render () {
    if ( !this.state.user )
      return <p>Loading...</p>;
      
    return (
      <p>
        <b>Name:</b> {this.props.name}
        <b>Years:</b> {this.state.user.years}
      </p>
    );
  }
});

const UsersList = React.createClass ({
  getInitialState () {
    return { users: [ 'user1', 'user2', 'user3' ] };
  },
  render () {
    return (
      <div>
        <h1>Users List</h1>

        {this.state.users.map ((name, id) => <UserInfo name={name} key={id} />)}
      </div>
    );
  }
});
1 Like
5

Ooh, so your idea is to perform the request in every individual user, I like that approach more, thank you!

6

You should always use setState and never mutate the original state. For anyone else that finds this.