[FIXED] How to change backgroundColor in map using jsx?

Issue

My backend is node js api in the tickets database document It will return some values ​​for the ticket as an example

If the ticket is open or closed, a value of 0 or 1 will be returned

If the ticket type is (sales) or (technical support), 0 or 1 . will be returned

If the ticket is read by the admin or not it will return 0 or 1

Now there is no problem with the back-end and all data is fetched properly

At this point I am trying to customize the ticket list in React based on the above information

For example, I want to change the background color of the card in the list I created based on the value returned from the backend

Here is my attempt to do so

this is TicketsHooks

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { getTicketsList,getTicketsListpage } from "../../../store/actions";
const AllTicketHook = () => {
    const dispatch = useDispatch();

    //to get state from redux
    const { ticketsList, isTicketCreated, error} = useSelector((state) => ({
        ticketsList: state.Tickets.ticketsList,
        isTicketCreated: state.Tickets.isTicketCreated,
        error: state.Tickets.error,
    }));
  
    //when first load
    useEffect(() => {
        const get = async () => {
            await dispatch(getTicketsList());
        }
        get();
    }, [dispatch, isTicketCreated])
       
    //to get page count
    let pageCount = 0;
    try {
        if (ticketsList.paginator)
            pageCount = ticketsList.paginator.pageCount
    } catch (e) { }
    //when press pagination
    const getPage = (page) => {
        dispatch(getTicketsListpage(page));
        console.log(page)
    }
    return [ticketsList, isTicketCreated, pageCount, getPage,error]
};

export default AllTicketHook;

this is TicketList

import React from "react";
import { Row,Container } from "reactstrap";
import TicketsListItem from "./ticketsLisCard";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Loader from "../../../Components/Common/Loader";

const TicketsList = ({ data, isTicketCreated, error }) => {
  return (
    <Container fluid={true}>
      <Row>
        {isTicketCreated === false ? (
           data.data  ? (
          data.data.map((item, index) => {
            return (
              <TicketsListItem
                key={index}
                id={item.id}
                category={item.categoryTickets}
                title={item.titleTicket}
                user={item.addedBy}
                listupdate={item.updatedBy}
                Seen={item.isSeen}
                updatedAta={item.updatedAt}
              />
            )
          })
        ) : <h4>No Tickets</h4>
      ) : (<Loader error={error} />)
        }
        <ToastContainer closeButton={false} />
      </Row>
      </Container>
    
  );
};

export default TicketsList;

this is TicketsListItem

import React from "react";
import { Col, Container, Row } from 'reactstrap';
import { Link } from "react-router-dom";

const TicketsListItem = ({ id, user, title ,category ,listupdate,Seen,updatedAta}) => {

  const Color = category.status === '2';



  return (
    <div className="page-title-box row border-top-5">
    <Row style={{ backgroundColor: Color ? "#fff3e0" : "white" }}>
            <Link to={`/ticket/${id}`} style={{ textDecoration: 'none' }}>   
            <div className="d-inline col-15  pe-2">{title}</div>
            <div className="d-inline col-14 pe-2">{user}</div>
            <div className="d-inline col-13  pe-2">{listupdate}</div>
            <div className="d-inline pe-2 ">{updatedAta}</div>
            <div className="d-inline pe-2 ">{Seen}</div>
            <div  />
            </Link>

      </Row>
      </div>
  );
};

export default TicketsListItem;

Knowing that everything works fine and the data is fetched and displayed, and there is no problem with that The long one is how do I change the background color of the card based on the value that comes back from item.categoryTickets

Solution

The reactstrap Row component doesn't consume any style prop, but it does take a className prop. You can create a CSS file with the classnames you need and import into the TicketsListItem component, and then conditionally apply the classes.

Example:

ticketsListItem.css

row: {
  background-color: white;
}

status: {
  background-color: #fff3e0;
}

...

import React from "react";
import { Col, Container, Row } from 'reactstrap';
import { Link } from "react-router-dom";
import "ticketsListItem.css"; // <-- import CSS file

const TicketsListItem = ({
  id,
  user,
  title,
  category,
  listupdate,
  Seen,
  updatedAta
}) => {
  const status = category.status === '2';

  return (
    <div className="page-title-box row border-top-5">
      <Row
        className={
          [
            "row",
            status ? "status" : null // <-- conditionally apply here
          ]
            .filter(Boolean)
            .join(" ") // <-- combine classes to single string
        }
      >
        <Link to={`/ticket/${id}`} style={{ textDecoration: 'none' }}>   
          <div className="d-inline col-15  pe-2">{title}</div>
          <div className="d-inline col-14 pe-2">{user}</div>
          <div className="d-inline col-13  pe-2">{listupdate}</div>
          <div className="d-inline pe-2 ">{updatedAta}</div>
          <div className="d-inline pe-2 ">{Seen}</div>
          <div  />
        </Link>
      </Row>
    </div>
  );
};

Answered By - Drew Reese
Answer Checked By - - Robin (ReactFix Admin)