我是个新手.我想在react JS中使用onClick事件，使用单个状态来呈现一个子组件

Question

点击按钮，状态应该能够使用statename.map呈现组件。谢谢

<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

创建一个状态，u可以在下面的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 m a 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>