How to render child component with onclick event in reactjs?

Question

I want to render child component when I click the button
Parents

const Parents:React.FC<PropTypes> = ({inputs}) => {
  return(
    <div>
      <Button onClick={() => <Child props={inputs}/>}
    </div>
   )}

Child

const Child:React.FC<AnotherPropTypes> = ({props}) => {
  // ... 
}

I am using React, TypeScript and Material-UI for it.
My question is that, it does not seem like onClick event trigger Child component. How can I run child component when I click the button?
Any help appreciated!

Nicholas Tower · Accepted Answer · 2019-12-13 18:47:30Z

5

Add state to your component. The click event sets the state, and the state is used to decide whether or not to render extra things.

const Parents:React.FC<PropTypes> = ({inputs}) => {
  const [showChild, setShowChild] = useState(false);
  return(
    <div>
      <Button onClick={() => setShowChild(true)} />
      {showChild && <Child props={inputs}/>}
    </div>
  )
}

answered Dec 13, 2019 at 18:47

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

1 Comment

jayko03 Over a year ago

Is it the React concept?

Collectives™ on Stack Overflow

How to render child component with onclick event in reactjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related