Return JSX Is Not Updating On State Change From Some Reason-CodePudding

So like the title states I have it setup so that I want to display a loading text or something simple while I wait for my array to get loaded up with data from a local array.

I have a simple array at the top of my class with Name, Id and Image. I than load these into an array I called items and load into another array called random items.

When I run the code normally nothing gets displayed due to the array being empty. I understand that and have tried to create this workaround but does not appear to be working.

return (
    <LinearGradient colors={["#FF8A8A", "#DC143C"]} style={{ flex: 1 }}>
      <View>
        {dataLoaded ? (
          <View>
            <Text>Loading...</Text>
          </View>
        ) : (
          items.map((item, i) => {
            <MatchingDisplay
              key={i}
              listItem={item}
              randItem={randItems[i]}
              checkChoice={checkChoice}
            />;
          })
        )}
      </View>
    </LinearGradient>
  );

After my function runs and the array is loaded up I make a state change to dataLoaded and change it to the boolean value True. For some reason my return method is not updating and displaying the items mapped out using the MatchingDisplay component.

I am not using any asynchrous functions as from what I understand it should just update automatically.

Any and all help is appreciated thanks!

CodePudding user response：

Your conditional is flipped.

When dataLoaded is false, the empty array is displayed. When it’s true, the loading text is displayed. Flipping this to !dataLoaded should fix the issue.