Tengo una serie de objetos que estoy recorriendo en mi componente de orden superior. Al hacer clic, quiero pasar uno de esos objetos a mi componente y renderizar ese componente. El problema que tengo es que no está claro cómo devolver el componente y hacer que React actualice el renderizado para mostrar ese componente. He leído varias publicaciones de Stackoverflow sobre esto y el problema de poner el componente en el html es que pasa todos los elementos de mi bucle a mi componente en lugar de solo el que necesito onClick.
La advertencia que veo en mi consola es react_devtools_backend.js:3973 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> Lo que tiene sentido, sin embargo, no estoy seguro de cuál es la sintaxis adecuada para resolver este problema. A continuación se muestra el código correspondiente.
const FormGroup = ({index}) => { const renderSection = form => ( // I want to render this <AdditiveSection form={form} register={register} errors={errors} /> ); const addSection = form => { setAdditionalSection(prevState => !prevState); console.log('form', form); renderSection(form); }; return ( <section> <FormProvider {...methods}> <form onSubmit={methods.handleSubmit(onSubmit)}> {myForm.controls.map(form => { if (form.type === 'section') { return ( <FormSection> <div className="section__label"> <h4>{form.label}</h4> </div> ... {form.button && ( <FormAdd> <LinkButton type="button" onClick={() => addSection(form)} // called here and passes my form object > <span className="button--small">{form.button}</span> </LinkButton> </FormAdd> )} {renderFormType(form)} </FormSection> ); } })} // renderSection should render here outside of the loop {additionalSection && renderSection} <input type="submit" /> </form> </FormProvider> </section> );Ponlo en estado y solo renderiza.
const { extraSection, setExtraSection } = useState(null); const addSection = form => { setExtraSection(form); }; return ( ... // renderSection should render here outside of the loop {extraSection} ); El problema con su enfoque original es que no estaba guardando ese elemento en ninguna parte. Llamó a renderSection al hacer clic, pero eso solo llamó a la función sin almacenar ni mostrar ese código en ninguna parte.
Luego, en su método de renderizado, volvió a hacer referencia a rederSection . Esta es solo una copia de la función, ahora sin un parámetro. No tiene ningún elemento como parámetro, y ni siquiera se llama, por lo que React se queja de que está tratando de representar una función, en lugar de un elemento.
intentalo
const renderSection = form => ( return( <AdditiveSection form={form} register={register} errors={errors} /> ) );En caso de que alguien más pueda estar luchando con esto. Gracias a szaman y este artículo. Resulta que necesito pasar la sección en el bucle, pero solo pasar los datos en los que se hizo clic.
const addSection = form => { console.log('form', form); setAdditionalSection(form); }; return ( <section> <FormProvider {...methods}> <form onSubmit={methods.handleSubmit(onSubmit)}> {myForm.controls.map(form => { if (form.type === 'section') { return ( <FormSection> <div className="section__label"> <h4>{form.label}</h4> </div> ... {form.button && ( <FormAdd> <LinkButton type="button" onClick={() => addSection(form)} // called here and passes my form object > <span className="button--small">{form.button}</span> </LinkButton> </FormAdd> )} {additionalSection && additionalSection.position === ind && ( <AdditiveSection form={additionalSection} register={register} errors={errors} /> )} {renderFormType(form)} </FormSection> ); } })} <input type="submit" /> </form> </FormProvider> </section> );