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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.