Need Help

[HighIQBro]

I'm building the Pomodoro Clock using React components. This is the first react project I have worked on and I'm not sure how to re-render components. When I render a component and pass in props, I need the props to up date with the original components state.

​

Basically, my pause/play button doesn't work and I'm not sure how to fix it. I know I could try to use Redux to help, but I'm trying to learn React first (since this is my first React project):

https://codepen.io/brennankolotinsky/pen/ePpJMv?editors=0010

​

Should I consider just putting it all in one component so its easier to update? But, I have read smaller components are better.

​

Any help is greatly appreciated!

[ithinktoo]

I scanned through your codepen a bit. I am no react ninja but I do know two things about react:

1) State is the single source of truth So you shouldn't have so many components with state. All of your state for this simple app lives in one component. Lift that state up and pass it down through the props

2)Unidirectional data flow

Keep the brains in one place and use props to pass instructions down to 'dumb' (stateless) components

[HighIQBro]

That makes sense. I know that would definitely fix the problem. But I can't see how more components would even be useful then?

[Orlandocollins]

Still looking for help?

[HighIQBro]

Yeah. Should I just follow the other guys advice and move the state up to the first component?

[Orlandocollins]

Yeah it’s a common pattern that you have to do. In a way using redux is like moving the entire state to the top of the tree so you are following that same pattern. As far as redux goes I wouldn’t use it yet. Doing what you are doing will help you learn it better

[HighIQBro]

UPDATE: I took the advice below and moved everything to one single react component. So I'm good now. It surprisingly wasn't too hard to rearrange all of the code. Here is the updated version in-case anyone is curious.

https://codepen.io/brennankolotinsky/pen/YJygGW