Estoy un poco sorprendido de tener problemas para encontrar esto en línea, pero parece que no puedo encontrar un ejemplo de cómo hacer esto en un componente funcional de React. Tengo un componente React que me gustaría renderizar cuando hago clic en un botón. En este momento, la función se activa y puedo ver mi console.log activándose, sin embargo, el componente no se está procesando. Mi primera suposición fue que no se renderizará porque React no sabe cómo actualizar la vista, sin embargo, agregué boolean a través de useState y aún no se renderizará. ¿Qué estoy haciendo mal?
A continuación se muestra el código correspondiente. ¿Cómo puedo obtener el componente en addSection para renderizar?
const FormGroup = ({index}) => { const [additionalSection, setAdditionalSection] = useState(false); const addSection = form => { setAdditionalSection(true); console.log('form', form); return additionalSection && ( <div key={form.prop}> <p>This should render</p> <AdditiveSection form={form} register={register} errors={errors} /> </div> ); }; ... return ( ... <FormAdd> <LinkButton type="button" onClick={() => addSection(form)} > span className="button--small">{form.button}</span> </LinkButton> </FormAdd> );Debe cambiar su estado (o un accesorio en su matriz de dependencia useEffect en caso de que tenga uno) para forzar una nueva representación. En este caso:
setAdditionalSection(prevState=>!prevState);
Un cambio de estado como el que está llamando, activará una nueva representación.
Pero todo el html que se representará debe incluirse en la declaración de devolución de los componentes funcionales. Los elementos que desea renderizar se pueden renderizar condicionalmente así:
const FormGroup = ({index}) => { const [additionalSection, setAdditionalSection] = useState(false); const addSection = form => { setAdditionalSection(true); console.log('form', form); }; ... return ( ... <FormAdd> <LinkButton type="button" onClick={() => addSection(form)} > <span className="button--small">{form.button}</span> </LinkButton> {additionalSection && <div key={form.prop}> <p>This should render</p> <AdditiveSection form={form} register={register} errors={errors} /> </div> } </FormAdd> );