Estoy tratando de crear un componente de autocompletar donde los caracteres relevantes se resaltan en las sugerencias de búsqueda a medida que el usuario escribe.
La forma en que se me ocurrió resaltar los personajes es este JSX
{suggestion.substring(0, ind) + <mark>{suggestion.substring(ind, val.length)}</mark> + suggestion.substring(val.length, suggestion.length)}pero representa un `[Objeto Objeto] en lugar de la cadena.
¿Cómo puedo corregir esto?
Aquí está mi código completo
searchSuggestions .filter((suggestion) => { const lowerSuggestion = suggestion.toLowerCase(); const val = eventValue.toLowerCase(); console.log("lowersuggestion is", lowerSuggestion, val); return lowerSuggestion.indexOf(val) > -1; }) .map((suggestion) => { const lowerSuggestion = suggestion.toLowerCase(); const val = eventValue.toLowerCase(); const ind = lowerSuggestion.indexOf(val); console.log("ind is", ind, typeof suggestion); return ( <div> {suggestion.substring(0, ind) + <mark>{suggestion.substring(ind, val.length)}</mark> + suggestion.substring(val.length, suggestion.length)} </div> ); }) Suponiendo que searchSuggestions es una matriz de cadenas. ¿Cómo debo hacerlo?
<mark es un elemento JSX, que es un objeto. Cuando lo interpole (o la mayoría de los objetos) en una cadena, obtendrá [object Object] .
En su lugar, use una matriz, de modo que se interpole en el JSX, en lugar de interpolarse en una cadena.
<div> {[ suggestion.substring(0, ind), <mark>{suggestion.substring(ind, val.length)}</mark>, suggestion.substring(val.length, suggestion.length) ]} </div>Hubo un problema con el JSX en sí, lo resolví cambiándolo a
{suggestion.substring(0, ind)} <mark style={{ backgroundColor: "#f7e7d0" }}> {suggestion.substring(ind, ind + val.length)} </mark> {suggestion.substring(ind + val.length, suggestion.length)}