Conditional Styling in React JS!

Hi guys!

In this post we will be discussing conditional styling.

Conditional Styling is used everywhere in web apps, especially in React JS. DOM manipulation and styling based on a state or condition very common and useful.

Check out my blog!

What is Conditional Styling?

In simple words, it is changing CSS based on a set of conditions or a state. The CSS that will be changed and/or added based on a condition can be inline styles or styled components among the many different ways of adding CSS in React.

Let's say we have a toggle menu, in this case conditional styling will be used to show/hide the menu based on a state. Similarly, we can open and close a popup using this method too.

Conditional Styling with Inline Styles

Let's use inline styling to get an idea. Conditions in styled components and more examples can be read on my detailed article on this topic here.

Lets create a simple popup with Conditional Styles using inline styling.
Add the following code to your App.js:



import { React, useState } from "react";
import "./App.css"

function App() {
  const styles = {
    popup:{
      display:"none",
      opacity:"0"
    }
  };
  return (
    <div className="main">
      <button className="open_button">Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button">Close!</button>
      </div>
    </div>
  );
}

export default App;

Notice a few things here. The popup is very simple itself and most of the CSS is coming from an external stylesheet. The only inline style used here is for the popup itself.

Now let us add the open and close states and functions.



function App() {
  const [open,setOpen] = useState(false)
  const styles = {
    popup:{
      display:"none",
      opacity:"0"
    }
  };
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </div>
    </div>
  );
}

The buttons are being used to toggle the open state from true to false and vice versa.

Now for the conditional styling we will add an inline if statement that will display the popup if the state is false and hide it if it is true. We will apply this to both the display and opacity.

This will be the final code.



import { React, useState } from "react";
import "./App.css"

function App() {
  const [open,setOpen] = useState(false)
  const styles = {
    popup:{
      display: open ? "flex" : "none",
      opacity: open ? "1" : "0",
    }
  };
  return (
    <div className="main">
      <button className="open_button" onClick={()=>{setOpen(true)}}>Open!</button>
      <div className="popup" style={styles.popup}>
        <h1>This is a popup!</h1>
        <button className="close_button" onClick={()=>{setOpen(false)}}>Close!</button>
      </div>
    </div>
  );
}

export default App;