I'm looking for your help to help me understand React better.
I have an idea for a simple app. It’s based on an educational activity I did in a training session once, and I think it’s a good opportunity for me to learn React.
Here’s the premise. You’re given a shuffled deck of cards. Each card has a type of activity on the card and is a certain color based on the type of learning preference it targets. For example one card may say “You use music during breaks”. You go through the card and place all the ones you actively do in your classroom into one pile, and place the ones you don’t in the discard pile. At the end of the activity, you have a clearer picture of what learning preferences you target, and what preferences you don’t. And you get ideas for activities to do in the classroom.
I thought making a digital version of this would work well. The app would present each card to you and ask you if you do that activity. When you’re all done, the cards would be displayed in both piles.
Here’s where I need advice. How would you architect this in React? I assume each card would be a component. I would imagine that I’d have the cards in an array and would iterate through the array, displaying each card. When the card is selected, I’d push it into one of two other arrays, a “does” array and a “does not” array. At the end of the process I’d iterate through both arrays and render the components into one of the two “piles”.
But I’m unsure how to orchestrate all of this. Doing this with jQuery would be pretty simple. But I’d like to know how you React folks would tackle something like this. I'm not really looking for code though. Just some nudges in the right direction.
I'm also not looking to get free consulting from anyone. I won't be selling this app. I'll open source it.
@tgriesser thanks for taking the time to answer. I was actually thinking about that approach but I wasn't sure if it was appropriate. :)