Reactjs conditional inline style with className and javascript object

Hello Friends,

In this article we will cover on how to implement react js conditional css. let’s discuss about react js conditional css. it's simple example of react classname multiple conditional. This article will give you simple example of css props.

In react you can use ternary condition in "className" and "style" attribute. you can use condition with state or props.

/src/App.js file

import React from 'react';
import './App.css';
import Mycss from './Mycss';

function App() {
  return (
    <div>
      
        <Mycss status="active" />

    </div>
  );
}

export default App;

/src/Mycss.js file

import React from 'react'
import './App.css';

function Mycss(prop) {

    const danger ={
        color:'red'
    };

    const success ={
        color:'green'
    };

    return(
        <div>
            <p className={prop.status == "active" ? "text-success" : "text-danger"}>Conditional Inline Style</p>
            <p style={prop.status == "active" ? success : danger}>Conditional Inline Style</p>
        </div>
    )  
    
}

export default Mycss;

I hope it can help you...