onClick Button from Page "A to Page B"

[Mersag]

Hallo alle zusammen,
Ziel
ich möchte ein add Button programmieren, womit ich meine Asana (Übung) aus meiner "Index und Wirkung Page" für meine "Asana Routine Page""auswählen(add)" kann und auf meiner Page "Asana Routine" angezeigt wird.

Was ich bis jetzt gemacht habe
ich habe Zustand genutzt und habe eine Componente useStore erstellt, darin habe ich die Funktion addCard.
ich habe auf meiner Wirkung Page Button onClick .

Frage
Was darf ich an meinem Code verändern, damit ich eine Asana Karte zu meiner Asana Routine auswählen kann?

Tausend Dank im Voraus für eure Hilfe . Ich bin im heute im Zoom Raum bo-web-22-1

Foto Code useStore Page Fehler Zeile 4-12

Foto Code Wirkung Page Fehler Zeile 34-39

[mpagels]

Du könntest in deinem zustand Store eine weitere Liste anlegen, die die Übungen speichert, die dann auf deiner Page "Asana Routine" angezeigt wird.

Bsp:

const useStore = create(set => ({
    exercises : [], // or cards
    routine: [],

   addRoutine: id => {
   // ...logic to find the id in the `exercises` array, and put this exercise then into the `routine` array
   return [...routine, newRoutine]
}
})

Dein Button braucht dann nur noch die id deiner exercise und ruft bei onClick die addRoutine Funktion aus dem zustand Store auf.

In deiner Page "Asana Routine" nutzt du dann die Liste routine aus deinem zustand Store, um die gespeicherten Routinen anzuzeigen.

[Mersag]

Hallo ,

vielen Dank für Deine Hilfe, ich habe das hoffentlich richtig verstanden und umgesetzt. Erhalte Fehlermeldung. Was verstehe ich noch nicht, oder wo habe ich einen weiteren Fehler gemacht?
const useStore = create(set => ({
exercises : [], // or cards. = verstehe ich Dich richtig, das meinst Du als Liste?
routine: [],=verstehe ich Dich richtig, das meinst Du als Liste?

Ich nehme mir heute noch etwas mehr Zeit, um Deine Antwort WIRKLICH zu verstehen, damit ich es richtig umsetze.

[mpagels]

Genau die eckigen Klammern [] sind eine leere Liste.

[UniversalTraveller]

Hallo Meral!

Guckt dir als ersten Schritt mal an, was VScode dir rot unterwellt. Da fällt mir addCard auf. Das ist rot, weil es das noch gar nicht gibt. Du musst es dir ja überhaupt mal aus dem useStore holen:
const addCard = useStore((state) => state.addCard);

Auch exercise ist rot, weil es die Variable hier gar nicht gibt. Du hast aber dafür die id, wenn ich das richtig sehe. Damit müsstest du arbeiten können, wie Martin schon meinte. Und onClick mit Funktion und allem kommt in den ersten (öffnenden) Button Tag rein. Zwischen öffnendem und schließendem Button schreibst du, was auf dem Button stehen soll.