How to give different background colors for different grid items in grid Layout in react.js

user_14341099 0
Viewed 1303

I am a new learner in react. I have developed a simple app, which displays the data from database in a grid view. Here I want to add different background colors for different grid-items based on the priority level which is obtained from the database. The priority level stored in the database are as"high, medium and low". These levels are displayed in each grid item inside the <p> tag.

I have attached the sample output image here below. Therefore, based on the <p> tag values which are either high/medium/low, I want to change the background color of the grid item. So that the items which have " high = is in read" , "medium = yellow" , and "low = green" Output:Frontend image

The code: Ticket.js

import React, { useEffect, useState } from "react";
import GridWrapper from "../helpers/gridWrapper"
import { getTickets } from "../redux/actions/ticketAction";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import  "./stylesheets/Ticket.css";
import ContentWrapper from "../helpers/contentWrapper";



const Tickets = () => {


  const [tickets, setTicket] = useState("");
 
  // //for ticket retrieval

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTickets());
  }, [dispatch]);
  const { ticket } = useSelector(state => state.ticket);

  //defining keys for priority
  const [state, setState] = useState({
    //creating 3 columns
    "high": {
    },
    "medium": {
    },
    "low": {
    }
  })

  return (
    <GridWrapper>
      <p>Tickets Component</p>
      <div className="grid_list">
 
        {ticket.map((tickets,key) => (
           
           <ContentWrapper className="card" >
    

          <p style={{fontSize:"20px" , fontWeight:"bold", color:"#5c5c5c"}}>{tickets.ticketTitle}</p>
          <hr style={{marginTop:"-18px"}}></hr>
           <p className="contain">{tickets.priority}</p> 
          <button class="button">send</button>
    
          </ContentWrapper>
        ))
        }
      

      </div>
    </GridWrapper>
    );
};

export default Tickets;

css file

.grid_list {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width:70%;
  }

  .card{
  border-radius:-10px;
  text-align: center;
 
  }
  .button{
    background: linear-gradient(to right, #0467e9, #009ffd);
    border-radius: 20px;
    padding:2px 2px 6px 2px ;
    color:white;
    border: none;
    height:55%;
    width:20%;
    margin-left: 250px;
    float:right;
    align-items: center;
    justify-content: center;
    margin-top:5%;
  }
reactjs gridview css
1 Answers

If I understood your question correctly, you can dynamically assign a style/class to the <p> tag:

const getPriorityColor = (priority) => {
  if(priority === "high") return {color: "red"}
  else if(priortiy === "medium") return {color: "yellow"}
  else return {color: "green"} 
}

return(
...
<p className="contain" style={getPriorityColor(tickets.priority)}>{tickets.priority}</p> 
...)

Note: ticket.map(tickets... is really confusing. I would use tickets.map(ticket...

user_123586930
Related