Solution For Conditionally Setting Style In React

Posted on by Brent Johnson
Conditionally setting Styles in React

Conditionally setting styles in React is essential if you want to manipulate styling based on conditions. How to do it? Let’s go into detail now.

Conditionally setting styles in React

Solution 1: Use in a usual way

First of all, let’s understand what conditionally style is. It simply will change CSS style based on conditions. For example, when you click the button and make whole paragraphs disappear set conditions when the user’s age exceeds 18, the name’s color will turn green. If not will be red, let’s go into code examples.

Example:

import { React, useState } from "react";
import "./App.css"
function App() {
  const [person,setPerson]= useState({name:'Togban',age:18,country:'VietNam'})
  const [showPerson,setShowPerson]= useState(true)  
  const handleBtn = ()=>{
    setShowPerson(!showPerson)
  }
 
  return (
    <div className="main">
      <button onClick={handleBtn}>Click Me</button>
      <h1 style={{color:`${showPerson?'blue':'black'}`}}>Infor</h1>
      <ul style={{opacity:`${showPerson?1:0}`}}>
        <li>Name:{person.name}</li>
        <li>Age:{person.age}</li>
        <li>Country:{person.country}</li>
      </ul>
    </div>
  );
};
export default App;

Output while not clicking the button yet:

When clicking button:

Here I create a showPerson useState like a flag to control the time person infor should show. Then with the click me button, I add an event handleBtn every time I click on the button, it will reverse set the showPerson. Then I set the opacity CSS property and color CSS property to depend on what the value of showPerson is. If it is true, the opacity will be set to 1, and the color will be blue. If false, opacity and color will be 0 and black. That is how conditional style works. It depends on the conditional, which here is showPerson, and will change CSS based on the condition and what we set it to show.

Solution 2: Use styled-component

This is library support react, so you will have to download it by npm by this command.

npm install –save styled-components

Then we will have to import it into our file, and now we can work with it. I will show you a simple example of the way we can combine styled-components with conditional styling.

Example:

import { React, useState } from "react";
import styled  from "styled-components";
import "./App.css"
function App() {
  const [person,setPerson]= useState({name:'Togban',age:18,country:'VietNam'})
  const [showPerson,setShowPerson]= useState(true)  
  const handleBtn = ()=>{
    setShowPerson(!showPerson)
  }
 const StyledUl = styled.ul`
 opacity:${showPerson?1:0}`
 const StyledH1 = styled.h1`
 color:${showPerson?'blue':'black'}
 `
  return (
    <div className="main">
      <button onClick={handleBtn}>Click Me</button>
     <StyledH1>Infor</StyledH1>
      <StyledUl>
        <li>Name:{person.name}</li>
        <li>Age:{person.age}</li>
        <li>Country:{person.country}</li>
        </StyledUl>
    </div>
  );
};
export default App;

Output before click button:

Output after click button:

It works just like I showed you, but instead of passing style to style property, I create an element that already has that style.

Summary

In this tutorial, I gave you the guide on conditionally setting styles in React. You can create your logic and set your CSS style to follow that logic by the ternary operator or if/else statement. If you have any questions, please comment below. Thank you for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *