How to call component on button click in React js?

Question

In React Js when I call child component within Parent component then component call render time but I want to call child component when I will click on button then call child component. I don't want to use routing.

I tried Props and context API but It is nor worked properly.

Answer 1

do this create a state which initially is false and with component which you call make it conditional with optional chaining and the button onclick changes the state to true so the component is rendered

something like this

import React,{useState} from 'react'

const abc = () => {
    const [isrendered,setisrendered]=useState(false);
  return (
    <div>abc</div>
    <input type="button" onClick={()=>{setisrendered(true)}} />click this to show component
    {isrendered&&<Thecomponent/>}
  )
}

export default abc