Bonjour,
Je débute avec React et React Native, je travaille sur une petite application pour mon apprentissage. J’ai déjà fait plusieurs composants avec React sur d’autres projets mais aujourd’hui j’ai un soucis avec un composant et je ne vois pas ce que j’ai mal fait.
Voici le code de mon composant parent :
import FoodItem from './components/FoodItem';
const foods = [
{ id: 1, name: "Lasagnes", picture: "", containsVegetables: false },
{ id: 2, name: "Filet de truite", picture: "", containsVegetables: false },
];
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.appname}>Simpleat</Text>
<Text style={styles.appbaseline}>Qu'est-ce qu'on mange aujourd'hui ?</Text>
{ foods.map( (food) => {
<FoodItem item={food} />
}) }
<StatusBar style="auto" />
</View>
);
}
Au niveau de mon .map, il n’affiche pas le composant <FoodItem>. J’ai fait un console.log(food) et je retrouve bien mon objet donc le .map n’est pas fautif.
Voici le code de mon composant <FoodItem> qui se trouve bien dans le dossier "components"
import React from 'react';
import { StyleSheet, Text, Image, View } from 'react-native';
const FoodItem = ({item}) => {
return (
<View>
<Text style={styles.itemName}>{item.name}</Text>
<Image source={{ uri: item.picture }} style={styles.foodImg} />
</View>
);
}
export default FoodItem;
J’ai volontairement enlevé les variables de style de mes exemples mais ils sont présents dans mon code. J’ai beau chercher ce qui pourrait clocher, je ne vois pas.
J’ai même tenté, hors du .map, d’afficher mon <FoodItem> de cette manière <FoodItem item={foods[0]} /> et mon composant s’affiche bien.
Si quelqu’un arrive à m’éclairer là dessus je veux bien.
Merci d’avance 
