He mapeado y filtrado a través de este objeto y quiero representar condicionalmente una clase basada en el texto que se genera. En este caso quiero que sea el texto "Ms". ¿Hay alguna forma de hacer esto dentro del objeto .mapped?

He intentado usar expresiones regulares. He intentado queryselecterAll. Lo he intentado para cada ciclo.

Siento que hay algo de lógica que me falta aquí.

Este es un objeto mapeado

 const [data, setData] = useState(false); const [searchUser, setSearchUser] = useState(""); useEffect(() => { setLoading(true); const fetchList = async (): Promise<UsersList> => { const result: any = await fetch("https://randomuser.me/api/?results=20") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); console.log(data); }); return result; }; fetchList(); }, []);

la clase

 .title { background-color: blue; }

objeto mapeado

 {data?.results .filter((val: any) => { if (searchUser === "") { return val; } else if ( val.name.first.toLowerCase().includes(searchUser.toLowerCase()) ) { return val; } else if ( val.email.toLowerCase().includes(searchUser.toLowerCase()) ) { return val; } else if ( val.location.city .toLowerCase() .includes(searchUser.toLowerCase()) ) { return val; } }) .map((d: any) => ( <div style={hoverStyle} className="text-blue-900 ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5" > <img className="rounded-full w-44 h-44 " src={d.picture.large} /> <h2 className="">{d.name.title}</h2>