How would you transfer data between components in React?

user_11760259 0
Viewed 57

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!

typescript reactjs javascript
2 Answers

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>
       )
    }
user_133318780

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

Squeegy_620760
Related