El problema:
Estoy tratando de devolver un ícono junto con el texto si un ternario es verdadero, y solo texto si el ternario es falso. Aquí está mi código:
{quote.is_archived ? <PencilFill className="mr-10" size={ 10 }/> + 'View' : 'Edit'}Cuando hago eso, esto es lo que obtengo, ¿alguien puede indicarme por qué sucede esto?
<PencilFill className="mr-10" size={ 10 }/> + 'View'
La primera parte de esto es un objeto, y la segunda parte es una cadena, por lo que cuando los concatenas obtienes [object Object]View . Lo que probablemente quisiste hacer fue un Fragmento, como en:
<React.Fragment> <PencilFill className="mr-10" size={ 10 }/> View </React.Fragment>O usando la notación abreviada:
<> <PencilFill className="mr-10" size={ 10 }/> View </>No use el operador + ya que concatena JSX con String.
Pruebe ternario solo en el lugar que desea cambiar de esta manera.
<PencilFill className="mr-10" size={ 10 }/> {quote.is_archived ? 'View' : 'Edit'}