Day 7 of 100days of code.

More differences between states and props:

• State is Internal data defined and managed within a component while props is external data passed from a parent component.

• State can be updated by the component itself while Props are immutable, meaning they cannot be changed within the child component.

• Updating state causes component to re-render and receiving new props causes the component to re-render 🤔( Usually when the parent's state has been updated).

• State is components memory🧠 while props play a role similar to the arguments passed to a function.

Flashcard Application:

How is it going to look?.👇👇

So, first, we create our list array 👇

Now we map through the list to render it, this time displaying only the question.👇

Now it looks like this with some styles applied👇👇

Now, let's make this interactive, and for this, we need State

In Three steps

• Create our state variable at line 48, set to a default value of null👇

• Now we use it in our JSX at line 61 to check if question.id is the selectedId, and conditionally render the answer or question👇

  

• For the third step, in the image above at line 49 👆👆, we create a function to update the state if question.id === selectedId . Since this happens by clicking a div, we add the onClick event listener on line 58👆👆.

  Take a look at what happens when I click on the first div👇

  

  Now let's add some conditions to toggle the first div back to the question when clicked on again .For this we update the function by adding the condition at line 50👇👇

Now, add some dynamic CSS styles for the background color to change when the answer is being displayed at line 59👇👇

There we have it; it looks like this now 👇👇👇

Thank you for reading and have a great day.