How can I return a React Component from a function and render it onClick?-CodePudding

I have an array of objects that I am looping through in my higher order component. On click I want to pass one of those objects to my component and render that component. The problem I am having is it's unclear how to return the component and have React update the render to show that component. I've read several Stackoverflow posts on this and the problem of putting the component in the html is it passes all the items in my loop to my component instead of just the one I need onClick.

The warning I'm seeing in my console is 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 /> Which makes sense however, I'm not sure what the proper syntax is to solve this problem. Below is the relevant code.

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>
);

CodePudding user response：

try it

const renderSection = form => (
    
return(      
   <AdditiveSection       
       form={form}       
       register={register}       
       errors={errors}        
   />
  )
);

CodePudding user response：

Put it in state and just render.

const { extraSection, setExtraSection } = useState(null);

const addSection = form => {
  setExtraSection(form);
};

return (
  ...
  // renderSection should render here outside of the loop
  {extraSection}
);

The problem with your original approach is that you were not saving that element anywhere. You called renderSection upon click, but that just called the function without storing or displaying that code anywhere.

Then in you render method, you again referenced rederSection. This is just a copy of the function, now without a parameter. It doesn't have any element as parameter, and it's not even called, so React is complaining that you're trying to render a function, instead of an element.