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

Question

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

Szaman · Accepted Answer · 2022-04-01 23:29:28Z

1

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.

answered Apr 1, 2022 at 23:29

Szaman

2,4161 gold badge19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

London804 Over a year ago

In the example you provided here you are not rendering my component you are just rendering the state. I need to pass the form to my component. My component does more than just display what I'm passing it.

Szaman Over a year ago

@London804 ? i omitted the other parts for simplicity (hence the ... placeholder). simply insert it in the appropriate places in your code, replacing your methods and the part where you render the form.

gabrielforster · Accepted Answer · 2022-04-01 23:00:57Z

0

try it

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

answered Apr 1, 2022 at 23:00

gabrielforster

398 bronze badges

1 Comment

London804 Over a year ago

I appreciate the attempt, but this is the same thing as what I created except yours has an explicit return.

London804 · Accepted Answer · 2022-04-04 16:09:03Z

Just in case anyone else may be struggling with this. Thanks to szaman and this article. Turns out I need to pass the section in the loop, but just pass through the data that was clicked.

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related