el mismo novato aquí. Tengo el código que funciona según lo previsto, todo lo que quiero hacer es agregar && con la variable de state (booleano) para hacer que un texto tenga una decoración de línea mientras se hace clic (usando crossItemOnClick)
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function Para(props) { const {id, className, info, state} = props; return ( <p onClick={props.crossedItemOnClick} id={id} className={className} style={{textDecorationLine: 'line-through'}}>{info}</p> ) } export default Para;Toda mi página desaparece si la cambio a:
<p onClick={props.crossedItemOnClick} id={id} className={className} style={state && {textDecorationLine: 'line-through'}}>{info}</p>Me encantaría saber qué estoy haciendo mal y por qué la página desaparece por completo. Y, por supuesto, una explicación para aprender si serías amable. ¡Muchas gracias!
El atributo de estilo toma el object como valor en reaccionar. La forma correcta será:
<p onClick={props.crossedItemOnClick} id={id} className={className} style={state ? {textDecorationLine: 'line-through'}:{}}>{info}</p>asumiendo que tiene que aplicar el estilo cuando el estado es verdadero.
Esto se debe a que la propiedad de style espera un objeto de tipo CSSProperties y, en caso de que su condición sea falsa, terminará con algo como style={false} que hará que su aplicación se bloquee ya que proporcionó un elemento HTML con un estilo no válido.
La solución más fácil es simplemente reescribir esa parte en style={state ? {...someStyle} : {}}
Su enfoque es mayormente correcto, sin embargo, su condición debe aplicarse en la propiedad de estilo directamente de esta manera si desea usar &&
style={{textDecorationLine: state && 'line-through'}}