I am new to react. I want to render a child component using a single state using an onClick event in react JS

Question

on Click of button the state should be able to render component using statename.map.. Thankyou

<div className="container mt-5">
      <div className="row">
        <div className="card pt-3">
          <div className="col-lg-12">
            <h4>Promotional Rates</h4>
            <p>
              Create promotional rate(s)
            </p>
            <button className="btn btn-primary my-3" onClick={???}>
              Add New Promotional Rates
            </button>
    <<<<<<<render child component here using .map>>>>>>>>>
          </div>
        </div>
      </div>
    </div>

Answer 1

creat a state and u can use whatever method in the js code bellow

 import React,{useState} from "react" const ParentComponent = () =>{ const [ShowChild,setShowChild]=useState(false) return( <div> //methode 1 {ShowChild && ChildComponent} // end methode 1 //methode 2 {ShowChild? <ChildComponent />: ''} //end methode 2 <button onClick={()=>setShowChild(!ShowChild)}>show child Button </button> </div> )} const ChildComponent = () => { return( <h1>I ma child</h1> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>