I’m pretty new to React (and web development in general), so hopefully I can explain well what I’m looking to do.

To practice using state, I’m building a small app with 3 components. The smallest component (Square.jsx) is a single square(div) that can change to a different color when you click on it. The next component (GroupOfSquares.jsx) loops x number of times and pushes those squares onto an empty array. Right now I’m just looping 5 times, (so it’s just displaying a row of 5 color-changing squares). Also within this component is an element that displays the total number of times you’ve clicked on any of the squares with a “reset” button that will reset the number of times clicked.

Where I’m really struggling is with this reset part. I want the button to also reset the colors, but for the life of me I cannot figure it out.

Code here

I’ve tried lifting the piece of state setting the colors to it’s parent component, but it always renders every single square to be the same color, and they all change simultaneously when I click one. I assume because I’m essentially setting the state to apply to the entire group of squares when I move it into the the GroupOfSquares component. I thought maybe the problem was in creating a loop rendering the 5 squares, but after tinkering with that I don’t think that has anything to do with it. I also tried adding an additional piece of state in the parent component while leaving my Square component alone, but that wasn’t working out well either.

I would appreciate any advice pointing me in the right direction!