29 – Setting Class Names Dynamically In React

In the last lesson, you learn how to set style dynamically and then you learn simple use javascript to manipulate whatever you then bind to that style property.
Now className also can be set dynamically like for the className='App' in src/App.js
but we calso introduce a new class to have something to play arround.

For example : We want to change something in our code like we have three persons element and may be we want to color the text to RED, Will add a new class in src/App.css. and may be we even make it bold so in same file will create a new class named .bold

.App {
	text-align: center;
}
.red {
	color: red;
}
.bold{
  font-weight: bold;
}

so we go 2 new CSS classes which are available globally, but right now I mam not using any.
In src/App.js I want to set className dynamically on some static paragraph.

...
render() {
	return (
		<div className="App">
			<button style={style} onClick={this.togglePersonsHandler}>
				Toggle Persons
			</button>
      <p>Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
		</div>
	);
}
...

Now I want to set the className of that paragraph dynamically depending on the length of the elements in my persons array

Condition:
below two or less than two then RED
and
One and less than one will convert RED and BOLD.

So to do that, of course, I need to adjust the classes or the className I set to that mention paragraph dynamically.
What I will do is will create a new variable in App.js named as classes where it will be an array of strings this is one way of doing that.

...
render() {
  let classes = ['red', 'bold'].join(' ');    // Class names defined in CSS (Array<string>)
	return (
		<div className="App">
			<button style={style} onClick={this.togglePersonsHandler}>
				Toggle Persons
			</button>
      <p>Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
		</div>
	);
}
...

‘red bold’ : is a valid css class list we can assign two class names and ofcourse I could created this manually, but I will soon added that array dynamically which is why i want to have a generic solution.
Now will bind the variable in className of the mentioned paragraph.

...
render() {
  let classes = ['red', 'bold'].join(' ');    // Class names defined in CSS (Array<string>)
	return (
		<div className="App">
      ...
      <p className={classes} >Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
		</div>
	);
}
...

By default it will add those classes to that paragraph. Now we can add some dynamic nature to that. We only want to ddo that if its less than one persons otherwise should be red if its less then 2 and if we have all three person non of the classes should be attached.

...
const classes = [];
if (this.state.persons.length <= 2) {
	classes.push('red');
}
if (this.state.persons.length <= 1) {
	classes.push('bold');
}
return (
	<div className="App">
    ...
  <p className={classes.join(' ')} >Some Rnadom Paragraph</p>  {/* Here will add dynamic className */}
	</div>
);
...

For Dynamic Conditional operation I have change the logic to make it work.

React introduction
React Component