[ Foro de Javascript ]

filter de datos segun estado de poliza

09-Apr-2024 00:59
Invitado (Junior G?mez)
0 Respuestas

Buenas tardes necesito porfavor si alguien me puede ayudar, crear una targeta en la cual lleva un mensage, color e icono segun el estado de una poliza

Cree un archivo js con titulo, descripcion, color e icono
// import WaringIcon from '../../src/assets/images/WaringIcon.svg';
import iconrequires from '../../src/assets/images/iconrequires.svg';
import Iconinspection from '../../src/assets/images/Iconinspection.svg';
import Iconrejected from '../../src/assets/images/Iconrejected.svg';

export const statusMessages = [
 {
   id: 1,
   icons: iconrequires,
   status: 'PROCESINS',
   color: '#B85D00',
   title: 'Inspeccion en proceso',
   description: 'Tu inspección está en proceso de análisis y revisión',
 },
 {
   id: 2,
   icons: Iconrejected,
   status: 'RECHAZADA',
   color: '#D32F2F',
   title: 'Inspección rechazada',
   description:
     'La inspección realizada a su vehículo no fue aprobada. Por favor contacta a tu ejecutivo',
 },
 {
   id: 3,
   icons: iconrequires,
   status: 'ENPROCESO',
   color: '#0061F5',
   title: 'Este vehículo requiere inspección',
   description: 'Solicitaremos una inspección para esta placa',
 },
 {
   id: 4,
   icons: Iconinspection,
   status: 'NOREQUERIDO',
   color: '#008040',
   title: 'Este vehículo no requiere inspección',
   description: 'Puedes continuar con el proceso de emisión',
 },
 {
   id: 5,
   icons: Iconinspection,
   status: 'APROBADA',
   color: '#008040',
   title: 'Inspección aprobada',
   description: 'La solicitud de inspección se encuentra aprobada para esta placa',
 },
];

Y lo estoy mapeando en un archivo jsx
import React from 'react';
import { statusMessages } from 'utils/statusMessages';

const messages = statusMessages;

const StatusMessageInfo = () => {
 const filteredMessages = messages.filter(
   (message) =>
     message.status === 'APROBADA' ||
     message.status === 'RECHAZADA' ||
     message.status === 'NOREQUERIDO' ||
     message.status === 'APROBADA' ||
     message.status === 'PROCESINS',
 );
 console.log(filteredMessages);

 return (
   <div>
     {filteredMessages.map((message) => (
       <div className={`bg-white w-865.99 h-60 mt-10 border-left border-l-${message.color}}`}>
         <div key={message.id}>
           <img src={message.icons} alt="" />
           <p className={`text-${message.color}`}>{message.title}</p>
           <p>{message.description}</p>
         </div>
       </div>
     ))}
   </div>
 );
};

export default StatusMessageInfo;

Pero al momento de renderizar las targetas se muestran todas y no segun el estado como deberia de ser.

SI me pueden ayudar les agradeceria




(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)