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

CodePudding user response：

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>
  );
};