- 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.