How would you transfer data between components in React?-CodePudding

I recently learned a bit about react and I'm confused about how I would transfer data between two components.

Currently, I have 2 functions implemented as such:

I have topbar.tsx which shows the topbar information, such as showing some button to open the sidebar (which is my next function).

import Sidebar from './sidebar'

export default topbar(props) {
   return (
       <Drawer
           open={isOpen}
           onclose={anotherfunction}>
           <Sidebar />
       </Drawer>
   )
}

I also have sidebar.tsx which contains the implementation of sidebar. (This is, if I understand react terminology correctly, the child).

import CloseButton from 'react-bootstrap/CloseButton';

export default Sidebar() {
    return (
        <CloseButton />
    )
}

The issue I'm facing is that, since the topbar is the function that controls the opening and closing of the sidebar, however, I want a close button to appear on my sidebar and do exactly as is said. How would I be able to transfer state information between these two files such that I can open sidebar and close it with the button in sidebar.

Thank you!

CodePudding user response：

First of all, rename topbar to Topbar. Otherwise you can't render your component.

For your question, you can pass the props directly to Sidebar component too.

export default Topbar(props) {
       return (
           <Drawer
               open={isOpen}
               onclose={anotherfunction}>
               <Sidebar open={isOpen}
               onclose={anotherfunction}/>
           </Drawer>
       )
    }

CodePudding user response：

You elevate your state to the parent component, and pass event handler functions through.

For instance:

// Holds state about the drawer, and passes functions to mamange that state as props.
function Topbar() {
    const [isOpen, setIsOpen] = useState(false)
    return (
        <Drawer isOpen={isOpen}>
            <Sidebar onClose={() => setIsOpen(false)} />
        </Drawer>
   )
}

// Drawer will show it's children if open.
function Drawer({ isOpen, children }: { isOpen: boolean, children: React.ReactNode }) {
    if (!isOpen) return null
    return <div>{children}</div>
}

// Sidebar will send onClose to the button's onClick
function Sidebar({onClose}: { onClose: () => void }) {
    return (
        <CloseButton onClick={onClose} />
    )
}

// Close button doesn't care what happens on click, it just reports the click
function CloseButton({onClick}: { onClick: () => void }) {
    return <div onClick={onClick} />
}

Playground