How to pass useState hook to child props in functional components

Question

I'm trying to use the useState hook for deciding whether a modal opens or not.

I have this in the parent component.

    const handleState = (e) => {
        setModalOpen(e);
    };

    const [ modalOpen, setModalOpen ] = useState(true);

and I am currently passing the hook as follows

    return (
        <ListWrapper>
            {therapies.map((e, i) => {
                return (
                    <div ref={(e) => (ref.current[i] = e)}>
                        <CardVertical
                            title={e.title}
                            info={e.info}
                            img={e.img}
                            imgAlt={e.imgAlt}
                            functions={[ modalOpen, handleState ]}
                        />
                    </div>
                );
            })}
            <Modal
                img={therapies[0].img}
                imgAlt={therapies[0].imgAlt}
                title={therapies[0].title}
                info={therapies[0].info}
                functions={[ modalOpen, handleState ]}
            />
        </ListWrapper>
    );

In the modal I am getting and using the hook like this.

const Modal = ({ img, imgAlt, title, info, functions }) => {
    const [ open, setOpen ] = functions;

<Button
  onClick={() => {
    if (functions.modalOpen) {
        setOpen(false);
    }
  }}

I can read the open fine. But I cant seem to call the function.

My idea is that I'll change the information on the modal depending on what element is clicked in the array of elements. Probably by passing more state between the elements.

I'm thinking about maybe using context instead since somehow this feels like it's getting complicated.

Answer 1

you can pass the modalOpen and handleState separately like this

<Modal
    mg={therapies[0].img}
    imgAlt={therapies[0].imgAlt}
    title={therapies[0].title}
    info={therapies[0].info}
    isOpen={modalOpen}
    toggleModal={handleState}
 />

and use it in Modal component as

const Modal = ({ img, imgAlt, title, info, isOpen, toggleModal }) => {

<Button
  onClick={() => {
    if (isOpen) {
        toggleModal(false);
    }
}}

Answer 2

you don't actually need to pass modalOpen and handleState separately. It should work anyway.

Plus, you dont need to define a new method to set the setter function. below is totally unnecessary.

const handleState = (e) => {
        setModalOpen(e);
    };

https://codesandbox.io/s/pass-usestate-to-child-c0qx6

Answer 3

The issue you’re experiencing is that you’re passing an array as the value for the functions prop, but you’re trying to check functions.modalOpen as though it is a non-array object. This way you would need to check functions[0]. You might want to instead change what you're passing in like so:

functions={{ modalOpen, handleState }}

Then you can do functions.modalOpen as you have done.

This said, this is probably not the right way to go about this. modalOpen appears to be a boolean, not a function, and in any case, there's no need to wrap it in an object. Hemanath’s answer provides a good example of this..