J'ai fais un peu différemment :
export default function App() {
// State
const [ordered, setOrdered] = useState(false);
const [products, setProducts] = useState([
{
name: "Iced Latte",
},
{
name: "Doubleshot Iced Coffee",
},
{
name: "Doubleshot Vanilla Iced Coffee",
},
{
name: "Caramel Macchiato",
},
{
name: "Iced Caramel Macchiato",
},
{
name: "Iced Cappuccino",
},
{
name: "Ristretto Bianco",
},
{
name: "Cold Brew Latte",
},
{
name: "Mocha",
},
{
name: "Iced Mocha",
},
{
name: "Americano",
},
{
name: "Iced Americano",
},
{
name: "Café Filtre",
},
{
name: "Café Filtre Glacé",
},
{
name: "Chocolat Viennois Signature",
},
{
name: "Chocolat Viennois Signature Glacé",
},
]);
// Fonction pour basculer l'état ordered
const toggleOrder = () => {
setOrdered((prevOrdered) => !prevOrdered);
};
let menu = products.map((product) => (
<View
key={Math.random()}
style={[styles.card, { display: ordered ? "none" : "flex" }]}
>
<Text style={styles.cardTitle}>{product.name}</Text>
</View>
));
return (
<ScrollView>
<View style={styles.container}>
<Image
source={{
uri: "https://upload.wikimedia.org/wikipedia/fr/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png",
}}
style={styles.logo}
/>
<Text style={styles.title}>STARBUCKS</Text>
{ordered ? (
<Text style={{ marginBottom: 20 }}>Commencez par ouvrir le menu</Text>
) : (
<Text style={{ marginBottom: 20 }}>Que souhaitez vous boire ?</Text>
)}
{menu}
<View style={{ marginTop: 40 }}>
<Button
onPress={() => toggleOrder()}
title={ordered ? "Ouvrir le menu" : "Fermer le menu"}
color="#00644B"
/>
</View>
<StatusBar style="auto" />
</View>
</ScrollView>
);
}
j'ai utilisé une function pour faire un toggle sur le prevOrderd.
J'espère c'est correct en tout cas cela marche.
Bravo Mickael ! Bonne idée