I am running a loop through an object trying to render an item per key in the object

export const BeachDetailsModal = (beachData) => {
  const details = {
    zAccess: beachData.zAccess,
  };
  Object.values(beachData).forEach((value, index) => {
    let key = Object.keys(beachData)[index];

    if (value === "TRUE") {
      details[key] = value;
    }
  });
  const RenderedItem = () => {
    return (
      <View style={styles.item}>
        <View style={styles.icon}>
          <Text style={{ fontSize: 26 }}>X</Text>
        </View>
        <View style={styles.itemHeader}>
          <Text style={styles.headerText}>Insert Name Here</Text>
        </View>
      </View>
    );
  };
  return (
    <View style={styles.outside}>
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            
            <Text style={styles.pageHeaderText}>{beachData.name}</Text>
            {Object.entries(details).forEach((entry) => {
              const [key, value] = entry;
              console.log(key, value);
              <RenderedItem />;
            })}
          </View>
        </ScrollView>
      </View>
      
    </View>
  );
};

However, nothing is being rendered. The console.log in the loop is giving me all the items in the object so the problem isn't the loop.

When I ran the following code as a test, the item was rendered

{beachData.zAccess === "Hike" && <RenderedItem />} 

So the problem is not the Component

Why wouldn't it render from the loop? Thanks

CodePudding user response：

Change your forEach to map like this:

{Object.entries(details).map((entry) => {
              const [key, value] = entry;
              console.log(key, value);
              return <RenderedItem />;
            })}