So if the problem set outlined in the last lesson. Let’s dynamically adjust the button style depending on what we are about to show persons or not.
Now we already have a look at how to dynamically render content like we handled if the statement of this.state.showPersons where we store some JSX into a variable and then output that variable in our template or our return function.
As always everything in render() is javascript so if we assign a style to the button i.e. between the curly braces it can be any javascript expression.

Setting Styles Dynamically

Therefore if this.state.showPersons is true this means persons can be seen, so as I outlined in the last lesson the button should have a red background because a click will remove the persons.
On the other hand, the default setup should be to not have a white background color but a green one and may we want to set the text color to white

const style = {
	background: 'green',
	font: 'inherit',
	border: '1px solid black',
	padding: '8px',
	borderRadius: '4px',
	boxShadow: '0 2px 3px #ccc',
};
return (
	<div className="App">
		<button style={style} onClick={this.togglePersonsHandler}>
			Switch Name
		</button>
	</div>
);

If we save this we can out the button got a green background color.
now the person is visible though the button background color should turn to red, So what we can do is in our if(this.state.showPersons) a statement which we already have where we set a person’s variable we can, of course, do more besides setting the persons variable after that we can also reach out to style and set the background color property which the style object has to RED.

const style = {
	background: 'green',
	font: 'inherit',
	border: '1px solid black',
	padding: '8px',
	borderRadius: '4px',
	color: 'white',
	boxShadow: '0 2px 3px #ccc',
};
if (this.state.showPersons) {
   persons = (
     // ...
   );
   style.background = 'red';
}

And with this tiny change in place we already got dynamic styling.. Run the application and test it out.
So this shows one crucial thing which you have to wrap your head around if you haven’t already. Everything is javascript.
You can manipulate the style object with any javascript code you want and in the end, when you then bind it, It simply applied no matter how you edited it.

Now What About className though?
Can we also set this dynamically, can we pass a list of class names Yes, we can!. I will show you how it works in the next lesson.

React introduction
React Component