Al hacer clic en el botón, el estado debería poder representar el componente usando statename.map. Gracias.
<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>crea un estado y puedes usar cualquier método en el siguiente código js
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>