React Course Notes : Props & State

20180924

  • Presentational components : GreeterMessage

It’s just a quick refresher. Presentational components simply take props and render something to the screen. The GreeterMessage component is a great example of a presentational component.

It accesses two props that get passed from it via the parent. It renders them to the screen and that’s it.

  • Presentational components : GreeterForm

GreeterForm is also a presentational component. It doesn’t maintain its own state. It simply takes some props renders the form and when the form gets submitted it calls a function. It doesn’t care if the state ever gets updated.

All it knows is that it’s going to get passed on a new name of function and is going to call it with the name when it gets updated.

  • Container components : Greeter

Our Greeter component is the classic example of a container component.

It maintains state for the application like the “name” attribute and when that state gets updated it updates its children.

So if the state gets a new name the GreeterMessage is going to render because it relies on the name state.

  • The next thing that’s important is that state can be changed and props can’t.

Inside of handleNewName, I can try to do this with this.props.message setting it equal to “something new”.

Literally save the file and then in the browser I can try to set a new name :

Hit set a name and you can see the message never changes updating :

Updating Prop values is not allowed in react. Updating the state though is perfectly fine. So container components have state but presentational components don’t.

  • The last thing is remember are container components really shouldn’t do much rendering other than rendering children.

In this case I have my containing <div> because I can only have one root element and then the only things I do is render children. And this is perfect. This is a great container component.