Articles → REACT.JS → Add the style and classes dynamically in react.js

Add the style and classes dynamically in react.js






Scenario





Code


import React from 'react';
import ReactDOM from 'react-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';



const Home = () => {

    let seconds = (new Date()).getSeconds();

    let isEven = seconds % 2 == 0 ? true : false;


    return (
        <React.Fragment>
            <p style={{ color: isEven ? 'red' : 'blue' }}>Heading</p>
            <button
                className={`btn ${isEven ? "btn-success" : "btn-info"}`}>
                Click Me</button>

        </React.Fragment >
    );
}
ReactDOM.render(<Home />, document.getElementById("root"));



Output


Picture showing how to add the style and classes dynamically in react.js

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, September 11, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250