OnClick of Button , Need to Display the Modal using React Typescript

Question

I have two Components, onClick on Button from "Button Component", I need to Perform Open & Close Operations of that Modal, But my Modal is in "Dropdown component"... There is No Relation between Button and Dropdown Components, Now How Can I send Onclick event from "Button Component" to "Dropdown component" , and use there to Perform Open & Close Operations of that Modal...

My Button Component

const Button:React.FC = () => {

    const [cancel, setcancel] = useState<boolean>(false)
    const onCancel=(event: React.MouseEvent<HTMLButtonElement>)=>{
        setcancel(true);
    }

  return (
    <button className='btn btn-dark' onClick={onCancel}>Button</button>
  )
}
export default Button

My Dropdown component

const Dropdown: React.FC = () => {
    const data = inputs;
    return (
        <>
            <div className='form-group'>
                <div className="col-4">
                    <select className="form-select" aria-label="Disabled select example">
                        <option selected>Select an Option</option>
                        {data.purpose.map((items) => (
                            //console.log(items.value);
                            <option>{items.value}</option>
                        ))}
                    </select>
                </div>
            </div>
            <div className="modal">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">Modal title</h5>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <p>Do YOu need any Changes</p>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default Dropdown

Here is APP.tsx

   function App() {
  return (
    <div className="App">
      <h1>LordShiva</h1>
      <Dropdown />
      <Button/>
    </div>
  );
}
export default App;

Answer 1

Make states in App.js

const [isModal,setIsModal] = UseState(false);

Now pass setIsModal in props of Button Component in your app.js file

<Button passedFunc={()=>setIsModal(!isModal)}/>

Now get this passedFunc in Button Component parameters in props and call it on onClick of button like onClick={() => props.passedFunc()}

Now pass isModal state in your DropDown Component,

<Dropdown show={isModal} />

Now get this show property in your dropdown components props.And then wrap the modal code like that :

{props.show ? <div className="modal">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <h5 className="modal-title">Modal title</h5>
                        <button type="button" className="btn-close" data- 
              bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div className="modal-body">
                        <p>Do YOu need any Changes</p>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" 
                       data-bs-dismiss="modal">Close</button>
                        <button type="button" className="btn btn- 
                       primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div> : null}

Note: you can destructure props too.