صدا زدن یه کامپوننت در رویداد onClick

نگاهی به مقاله زیر بندازین
https://flaviocopes.com/react-show-different-component-on-click/

سلام. همونطور که خودتون گفتین باید یه متغیر بولین رو توی استیت تعریف کنید که با کلیک کردن روی button به true تغییر وضعیت پیدا کنه و نمایش دادن کامپوننت رو منوط به این بکنین که اگه اون متغیر true هست نشون داده بشه.
کامپوننت اول :

import React, { useState } from 'react';
import SecondComponent from './secondComponent';
function FirstComponent(props) {
    const [showComponent, setShowComponent] = useState(false);
    return (
        <React.Fragment>
            <button
                onClick={() => setShowComponent(true)}
                className="btn btn-primary">show the second component</button>
            {
                showComponent ? <SecondComponent /> : null

            }
        </React.Fragment>
    )
}
export default FirstComponent;

کامپوننت دوم :

import React from 'react';
function SecondComponent(){
    return(
        <h1>this is a test from second component</h1>
    )
}
export default SecondComponent;

اگر از class base components استفاده میکنید کافیه به جای useState از setState استفاده کنید

ممنون از دوستانی که پاسخ دادند
حالا می خوام هر بار این دکمه زده شد کامپوننت رو اضافه کنه بشه دوتا سه تا چهارتا .

<Component />
<Component />
<Component />
<Component />

@deathangelyou
@parastooebrahimi