Help with solving exercise

Hi all!

Trying to get some more information on React before I can finish all the projects to get the cetification.
Found this exercise: react_exercises/02-props-state-component-architecture/state at master · rithmschool/react_exercises · GitHub.

My code in codepen: https://codepen.io/jonascotch/pen/qBMzbar

Got to this point but I can’t really make the divs change color on clicking them.
Since state must be managed by parent component (“App”), how do I trigger a function from the child component (“Square”) to make it change colors? Maybe I need a complete redesign of the code but I really need some help since I’ve been learning this completely on my own. Spent all day on this but couldn’t figure it out. Thanks for any help.

Edit: code link was wrong

You should declare the function in the parent, so the parent ‘knows’ about the function.
Then, you should pass the function as a property to child.
Then, you should establish logic in the child, so the function is called when needed

Thanks for replying. I’ve corrected the link to the code.
I have declared the function in the parent and passed it to the child.
I don’t know these are done the right way.
What do you mean with “establish logic in the child?”.

That means, that the function which was passed as a prop, should be invoked when some stuff happens.
On button click or whatnot, depends on what you’re trying to achieve.
I would bake some quick example, but you seem to be using class components, and I’ve learned functionals so far, so I don’t wanna provide crappy example with class components accidentally :upside_down_face:

Ok, thanks for your help.

Can I do this with one “Square” component or should I create 24 components?

The general approach will be the same, regardless.

You can declare 1 function in the parent and pass it to all the children, even if there is multiple children.

You can create several functions in the parent, and pass 1 function - to some children, pass another function - to another children, based on some conditions.

At the end of the day, details depend on what functionality you are trying to achieve.

The main idea is the same - if you want children affect the parents, passing function down will be the way to go.