Question 73004 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How do I conditionally change a prop element's style (background color) in react js? – Reactjs

I have a parent and child components that I use to display some contents about Inventory reports using react props. basically, the props contain information about individual inventory report card and one of those props is a tag that could have a "weekly", "monthly" or "yearly" value. I would like to dynamically change the background of each tag based on the text. So for example. if the tag = "daily", the background of the tag element should be black, if tag="monthly" background should be red and if tag=yearly, the background should be able. Note that I only want to change the background of the tag element and I have a color scss file where I have stored different color variables whichIi want to use to accomplish the change mentioned above.

THE CARD COMPONENT CODE (child component)

<>
            {props.details.map((value, index) => (
                <div className='report-container' key={index}>
                    <div className="report-header">
                        <h1>{value.title}</h1>
                        <p className="date">{value.creation_date}</p>
                    </div>
                    <div className="tag-container">
                        <span className="tag"> {value.tag} </span>
                    </div>
                    <div className="report-card-deets">
                        <p className="file-size"> {value.file_size} </p>
                        <button>Download</button>
                    </div>
                </div>
            ))}
            ;
        </>

MY ARRAY containing values that will be populated in the card component

const ReportData = [
    {
        title: "Inventory Turnover report",
        creation_date: "31-03-2023",
        tag: "Daily",
        file_size: "100 kb",
    },
    {
        title: "Top ordered items report",
        creation_date: "28-03-2023",
        tag: "Yearly",
        file_size: "203 kb",
    },
    {
        title: "Stockout rate report",
        creation_date: "01-04-2023",
        tag: "Weekly",
        file_size: "400 mb",
    },
];

MY COLOR VARIABLES

$primary-color: #1F8A70;
$secondary-color: #68B984;
$tertiary-color: #D6DCD8;
$text-color: #000000;
$text-color-light: white;
$background-color: #EDE4E0;
$container-background: #F2E9E5;
$table-background: #1F8A70;
$card-gradient: linear-gradient(285.25deg, #92C1A2 30.98%, rgba(107, 175, 109, 0.43) 77.71%);
$background-gradient: conic-gradient(from 126.2deg at 50% 50%, #1F8A70 0deg, rgba(76, 167, 124, 0.54) 178.12deg, rgba(103, 184, 132, 0.278471) 295.36deg, #1F8A70 360deg);

I already tried inline conditioning but that is not recommended since I have 3 conditions rather than 2. Also, I was wondering if I would be able to do this with className but I haven’t quite figured that out at this moment. What would you recommend guys?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Changing the child component code to the following will fix the props value not showing:

    <DynamicBackground className='tag' tag={value.tag} > {value.tag} </DynamicBackground>


  2. 0

    You can use styled-component library to create components from html tags. In your case, this code would solve the problem:

    First, you need create the styled-component:

    const DynamicBackground = styled.div`
  background-color: ${ props => 
                  props.tag === 'Daily' ? 'red' 
                  : props.tag === 'Yearly' ? 'blue'
                  : 'green'
              }
`

    This component can recive the tag prop and its ready to use in the CardComponent. It will looks like:

    return (
    <>
      {props.details.map((value, index) => (
          ...
          <DynamicBackground tag={value.tag} />
          ...
      ))}
      ;
   </>
  )
    Login or Signup to reply.
  3. 0

    If you don’t want to use the Styled component as @Alejandro suggested, you can use this approach:

    <>
{props.details.map((value, index) => (
    <div
        className='report-container'
        key={index}
        style={{
            backgroundColor: value.tag === 'Weekly' ? 'red' // you may use your preferred color hexadecimal instead (ex: #f00)
                : value.tag === 'Monthly' ? 'blue' // you may use your preferred color hexadecimal instead (#00f)
                    : 'green' // you may use your preferred color hexadecimal instead (#0f0)
        }}>
        <div className="report-header">
            <h1>{value.title}</h1>
            <p className="date">{value.creation_date}</p>
        </div>
        <div className="tag-container">
            <span className="tag"> {value.tag} </span>
        </div>
        <div className="report-card-deets">
            <p className="file-size"> {value.file_size} </p>
            <button>Download</button>
        </div>
    </div>
))}
</>

    Note: I’m assuming that Weekly, Monthly and Yearly are the only values that value.tag will hold, if it will hold any additional values like Daily, you will need to add it to the conditional part.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search