How do I pass a UseState to another jsx component? - reactjs

Question

I am working on a react Movie app and I want to pass a showModal useState to another component as I have a conditional on the component with my showModal like this:
const [showModal, setShowModal] = useState(false);
return (
<>
{showModal ? (<div>Modal..</div>) : null}
</>
Then on the other component I want to pass the hook to is something like this:
... <button
type="button"
onClick={() => setShowModal(true)}
className="my-4 border text-white py-2 px-4 rounded-3xl border-blue-600 bg-blue-600 shadow-lg"
>
Watch trailer
</button>...
Thanks in advance!

Answer 1

You can totally pass the setShowModal as a props.
const [showModal, setShowModal] = useState(false);
return (
<>
{showModal ? (<Modal setShowModal={setShowModal} />) : null}
</>

Answer 2

Write this hook : const [showModal, setShowModal] = useState(false); in the parent component.
And then pass the function setShowModal in props of your modal componant.
export default function YourModal({setShowModal}){
}
Your modal component should look like this and you can use the function setShowModal inside this component

Answer 3

Well the best approach here is to use react context api , since you don't write your code base and components tree it's very difficult to guess which one belongs to other!
Anyway you could have this kind of context called modalContext :
import React from 'react';
import { useState, createContext, useContext } from 'react';
const ModalContext = createContext(null);
function ModalProvider({ children }) {
const [showModal, setShowModal] = useState(false);
return (
<ModalContext.Provider value={{ showModal, setShowModal }}>
{children}
</ModalContext.Provider>
);
}
function useModal() {
const context = useContext(ModalContext);
if (context === undefined) {
throw new Error('useModal must be used within a ModalProvider');
}
return context;
}
export { ModalProvider, useModal };
and then wrap your application with the provider :
import {ModalProvider} from '...(path to context)/modalContext';
<ModalProvider>
<App />
</ModalProvider>
then where ever you need modalShow or the setter setModalShow you can call it like this easily :
import {useModal} from '..path to /modalContext';
function SomeComponent() {
const {showModal, setShowModal} = useModal();
return (
<>
{showModal ? (
<ChildComponent toggleModal={setShowModal}>Modal..
</ChildComponent>
) : null}
</>
);
}