React Native: Passing specific object from array of object as props

user_4062082 0
Viewed 475

If I have a static array of 4 objects and I would like to pass several data items from specifically from the third object in this array, how can this be done?

Here is an example:

const ENTRIES = [
{
name: "John"
color: "#fffff"
food: "Pasta"
},
{
name: "Ann"
color: "#f3f3f3"
food: "Salad"
},
{
name: "Mark"
color: "#000000"
food: "Sushi"
},
{
name: "Alice"
color: "#0f3cfs"
food: "Burger"
},
]

export default class SpecificItem extends Component {
  render() {
    return (
      <SafeAreaView>
        <View>
            <Card
              name={ENTRIES.name}
              color={ENTRIES.color}
              food={ENTRIES.food}
            />
        </View>
      </SafeAreaView>
    );
  }
}

If we take the following example, how would I specifically pass props for the 3rd object item with the details name: "Mark", color: "#000000", and food: "Sushi" into the component?

react-native reactjs javascript
2 Answers

ENTRIES is array holding objects, for each object you should map through it, and for specific index filter for it -

  <View>
   {ENTRIES.filter((entry, index) => index == 2 && (
            <Card
              name={entry.name}
              color={entry.color}
              food={entry.food}
            /> 
   ))}
  </View>

will give you only the third object in the array.

of course, you can set the checker as something more dynamic like

index == this.state.someIndexState &&

and declare someIndexState state

user_113606690

Your can use map over each object

<View>
   {ENTRIES.map((entry, index) => (
            <Card
              name={entry.name}
              color={entry.color}
              food={entry.food}
            /> 
   ))}

user_61799090
Related