How can I make a component render onClick in a React functional component?

Question

I'm a bit surprised I'm having trouble finding this online, but I can't seem to find an example of how to do this in a React functional component. I have a React component that I would like to render when I click a button. Right now the function fires and I can see my console.log firing, however the component isn't rendering. My first guess was that it won't render because React doesn't know to update the view, however I added boolean via useState and it still won't render. What am I doing wrong?

Below is the relevant code. How can I get the component in addSection to render?

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

pepinillo6969 · Accepted Answer · 2022-03-31 22:02:42Z

1

You should change your state (or a prop in your useEffect dependency array in case you had one) in order to force a rerender. In this case:

setAdditionalSection(prevState=>!prevState);

edited Mar 31, 2022 at 22:02

answered Mar 31, 2022 at 21:59

pepinillo6969

5636 silver badges16 bronze badges

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

8 Comments

London804 Over a year ago

I'm sorry your sentence doesn't make sense to me. Can you elaborate?

pepinillo6969 Over a year ago

What doesn't make sense exactly

pepinillo6969 Over a year ago

You are forcing always your state to be true. You should toggle it to false/true if you want a rerender.

London804 Over a year ago

On click I'm adding a section so I always want it to be true if I clicked. In either case this doesn't solve my primary issue.

pepinillo6969 Over a year ago

But what's the point of having a state with always the same value?

|

Nicklas Lid · Accepted Answer · 2022-03-31 22:16:45Z

0

A state change like the one you are calling, will trigger a re-render.

But all html to be rendered must be included in the functional components return statement. The elements you want to render can be conditionally rendered like this:

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

edited Mar 31, 2022 at 22:16

answered Mar 31, 2022 at 22:10

Nicklas Lid

663 bronze badges

2 Comments

London804 Over a year ago

hmm, I'm not sure why this works. I have several functions in this component that return a function and render the html just fine. Thanks

Nicklas Lid Over a year ago

If the function that returns HTML is called directly from the functional components return statement, the returned HTML will be rendered. I hope that explains the behavior you're seeing, otherwise I don't know

Collectives™ on Stack Overflow

How can I make a component render onClick in a React functional component?

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related