Update List element by key in React Native

Question

First off, I've little experience with React and I am still learning the terms.

Basically, what I have is a component that will draw a list based on some JSON obtained through a fetch() call. What I now need to do is to be able to update each list element based on events received from an EventSource.

The events received from the EventSource will be in the form of {id : data} Each item on the list has a unique identifier, and based on the events comming in I want to flash an activity indicator on the list with the ID from the event.

I can't figure out how to do this. I can't seem to directly address any of the items in the list, even though each has a unique ID.

Essentially, I have been searching through google for a solution to this issue, but none of the results I have come across seem to address this issue.

import React from 'react';
import {Text, View, StyleSheet, Button, ScrollView} from 'react-native';

export default class MainFilter extends React.Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true};
        this.filterURL = this.props.filterURL;
    }

    componentDidMount(){
        init(this.filterURL).then(resp => {
            this.setState({
                filter: resp['fullFilter'],
                filterKeys: resp['filterKeys'],
                isLoading: false
            });
        })
    }



    render(){
        if(this.state.isLoading){
            return(
                <View>
                    <Text>Component is LOADING</Text>
                </View>
            )
        }

        let filterKeys = this.state.filterKeys;
        let fullFilter = this.state.filter;

        const filterList = filterKeys.map((item) =>
            <View key={item} style={styles.container}>
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>
                        <Text style={{fontSize: 19, fontWeight: 'bold'}}>{item}</Text>
                        <Text style={{fontSize: 16}}>{fullFilter[item]}</Text>
                    </View>
                    <View>
                        <Text>KEKEKEK</Text>
                    </View>
                </View>

                <Button key={item} title={"ADD TO FOCUS"} onPress={function() {console.log(item)}}/>

            </View>
        );
        let filterIndex = {};
        for(let i = 0; i < filterList.length; i++)
        {
            filterIndex[filterList[i].key] = filterList[i]
        }

        console.log(filterIndex);


         return(


            <ScrollView style={{flex: 1, paddingTop:20}}>
                {filterList}
            </ScrollView>
        );
    }
}






const init = async (url) =>{

    let response = await fetch(url);

    let respJSON = await response.json();
    let filterParts = {};

    filterParts['filterKeys'] = Object.keys(respJSON);
    filterParts['fullFilter'] = respJSON;

    return filterParts

};

Essentially what I need to do is to flash an activity indicator on each of the items on the `filterList' constant.

So. How do I do this? Is it possible? I really want to avoid having to continually redraw the whole component since I don't want to potentially be making hundreds of fetch() calls.

Answer 1

Ended up completely redesigning the app. Facing different problems now.

Question no longer relevant.

Answer 2

You mean something like this ?

import React from 'react';
import {Text, View, StyleSheet, Button, ScrollView} from 'react-native';

export default class MainFilter extends React.Component {

constructor(props){
    super(props);
    this.state ={ isLoading: true};
    this.filterURL = this.props.filterURL;
}

componentDidMount(){
    init(this.filterURL).then(resp => {
        this.setState({
            filter: resp['fullFilter'],
            filterKeys: resp['filterKeys'],
            isLoading: false
        });
    })
}
filterList(isLoading) {
    const {filterKeys, fullFilter} = this.state;

    return isLoading ? filterKeys.map((item) => (
        <View key={item} style={styles.container}>
            <View style={{flex: 1, flexDirection: 'row'}}>
                <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>
                    <Text style={{fontSize: 19, fontWeight: 'bold'}}>{item}</Text>
                    <Text style={{fontSize: 16}}>{fullFilter[item]}</Text>
                </View>
                <View>
                    <Text>KEKEKEK</Text>
                </View>
            </View>

            <Button key={item} title={"ADD TO FOCUS"} onPress={function() {console.log(item)}}/>

        </View>
    ) : (
      <View>
           <Text>Component is LOADING</Text>
      </View>
 ));
}

render(){

    let filterIndex = {};
    for(let i = 0; i < filterList.length; i++)
    {
        filterIndex[filterList[i].key] = filterList[i]
    }

    console.log(filterIndex);


     return(


        <ScrollView style={{flex: 1, paddingTop:20}}>
            {this.filterList(this.state.isLoading)}
        </ScrollView>
    );
}
}

sorry for the terrible formatting.