Displaying text for every item in list using setState after HTTP request

1

I’m making a separate HTTP request for every item in a list to display these elements on the corresponding list item. The state is initialized as follows:

state = {
    data: [],
    categoryList: [],
    loaded: false,
    isLoading: true,
    isError: false,
  };

The method that sets the state for each element in the list is called in renderItem(), which is being called for each element in a FlatList (a component in React Native, but the idea should be the same as a regular list containing array items), The Text element should contain the value for a specific list item:

{this._getCategories(item)}
<Text style={styles.categories}>this.state.categoryList[item.id]</Text>

The state is set in _getCategories (where names is a string that is coming from the request):

let newState = Object.assign({}, this.state);
          newState.categoryList[item.id] = names;
          this.setState(newState);

A made a Expo snippet that can be found here: Snippet. Although there’s not much code, I’ve added comments to describe the flow and desired result (showing the required category per artist in a list).

Could anyone tell me what I’m missing here? I’d appreciate that a lot. :slight_smile:

2

Perhaps the JavaScript within the Text tag should be enclosed in braces?

1 Like