As a public school English teacher in my previous life, I amassed PowerPoint files of games filled with vocabulary games for my elementary students to review. I worked for South Korea's foreign English program which gave me some advantages. The curriculum was set by the government and my lesson plans are based off of textbooks that were provided to us.
One of main problems was that these textbooks changed versions every year and so did the content. What I created for one year did not work for the following year, I had to update them.
I build this game in two days to help alleviate the repetition of recreating materials.
This is one of many games I have to built!
What I Learned
Making this particular game gave me solid review in Javascript and React. To get the alternating patterns like you see above, I created a function to pass a random color prop to my word item component. This was a more advanced way of utilizing the styled-components in React than I have previously done!
How This Will Help Me
Today I want to help you in showing how I went about generating random colors for my application!
I have a parent app that handles the randomization of colors and then the list of colors gets mapped as a prop to the item component and passed down to the styled-components component.
Set Up
First I set up my list of colors which is a constant variable meaning this won't change.
I utilized useState and useEffect hooks to generate a randomized list. Here I declared states for an empty random list and update as true. Update won't be true for long because when useEffect runs after the component mounts, it will change update as false. We will revisit this.
Random Function
Now I want to write my random function that takes the list and loops through, randomly taking a color that doesn't repeat to create a new list.
useEffect For Changes
Going back to useEffect, I write a condition that if update is true, make a randomized list using my randomize function, then set the update state as false. If you keep update's value as true, your app will crash because of too many re-renders!
Next I map item components to the random color list.
My return statement quickly sets up the item components with a button that 'calls' the useEffect hook to update colors in state. The useEffect hook will generate a new list and set update as false again.
The Child Component
The child component takes one prop which is color and it returns a styled-component component that I named ColorItem. What you see is actually two components and the color prop is being passed twice.
To set up this component I also pass color into the ColorItem component and write a conditional statement in the properties.
So then we have the following:
You can check out the final code here.
There is a whole lot of ways to optimize and improve on this. For example, what if I want to set colors for an undetermined number of items?
Onto the next challenge!
Top comments (0)