Discussions

Correction Afficher Menu

Image

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.


1 réponse
Image
Louis-Nicolas Leuillet
Le 20/05/2024 à 08:39

Bravo Mickael ! Bonne idée

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le May 20, 2024 12:17 AM
Dernière activité le May 20, 2024 8:39 AM