Conditionally applying CSS classes in React

• Create Components folder under src folder
• Add CSSclassesConditionallyApply.js file and add below Code

import React, { Component } from "react";

import "./CSSclassesConditionallyApply.css";

class CSSclassesConditionallyApply extends Component {

constructor() {

super();

this.state = { isRed: true };

}

render() {

const isRed = this.state.isRed;

return (

<div>

Conditionally applying CSS classes

<p className={isRed ? "class1" : "class2"}>Example Text</p>

</div>

);

}

}

export default CSSclassesConditionallyApply;

• Add CSSclassesConditionallyApply.css file and add below Code

.class1 {

background-color: red;

}

.class2 {

background-color: blue;

}

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSclassesConditionallyApply from "./component/CSSclassesConditionallyApply";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSclassesConditionallyApply />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: