Tengo un componente que tiene datos asignados. Mi tarea es cambiar el color de fondo de caracteres específicos. En este caso, son "Señorita", "Señora", "Sra". Sé que puedo usar expresiones regulares, pero sigo recibiendo un objeto de error que posiblemente sea nulo.
Este es el componente y lo que he probado.
const h2 = document.querySelector("h2") h2.innerHTML = h2.textContent.replace(/[ms]/g, "<span class='title'>Miss</span>"); .title { background-color: blue; } .map((d: any) => ( <div style={hoverStyle} className=" ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:bg-slate-200 rounded-lg container p-5"> <img className="rounded-full w-44 h-44 " src={d.picture.large} /> <h2>{d.name.title}</h2> <h3 className="font-bold text-3xl font-serif"> {" "} {d.name.first} {d.name.last} </h3> <p className=" text-md ">Gender: {d.gender}</p> <p className=" text-md bg-blue-300 text-white ">Contact: {d.email}</p> <p className=" text-md "> City: {d.location.city} </p> </div> ))} </div>Este es el código sandbox
https://codesandbox.io/s/sweet-mclean-nrhcdq?file=/src/App.tsx
Creo que aún puede lograr esto en la función de mapa. Puede hacer una verificación usando un operador ternario como