What is the "React way" if toggling visibility of a component using its own "close" button?

user_1236657 0
Viewed 455

I have a component with a close button in the corner. I've seen lots of great examples how to show and hide components using conditional rendering in the parent

parent.render (<>
...
{ this.displayState? <MyComponent/> : null }
...
</>)

I realise there are mulitple approaches to this but this is not the topic of the post. I can use this type of approach to toggle state from the parent but how do i toggle display/visibility state of a component from within itself. i.e. clicking its close button? Do I have to pass in a prop to the component to access parent displayState variable from within it? That seems very cumbersome.

This is a no-brainer in JQuery and Dom but I would like to know react way of doing it.

thanks

reactjs javascript
2 Answers

Yes, you can pass prop that would be the handler for when you click the close button. In React there is the notion of a Controlled component (one that is controlled by its parent) and Uncontrolled component (one that handles all its own state, but may take initial values via props from its parent). It's usually bad practice to mix the two, as it can become hard to manage. Passing the prop handler to close the component would be an example of building a controlled component, whereby the display state is managed by the parent. You could also build it as an uncontrolled component that would take its initial display from the parent but then manage it's own internal state from thereafter. In an uncontrolled component, you could also always pass a handler that you may way to call if there is any other side effects you want to happen, e.g. trigger another component to display instead etc.

p.s. you can shorten { this.displayState? <MyComponent/> : null } to {this.displayState && <MyComponent/>}

One main difference about toggling the component via from within the parent, i.e. using this.displayState && <MyComponent /> is that it will mount or unmount the component, firing the relevant lifecycle hooks

Whereas toggling from within inside the child component will not be mounting or unmounting the child

It all boils down to what you're desired outcome is -

  • remove completely from DOM, and trigger any unmounting logic, like cleaning up event handlers - use the parent to unmount the child using the && syntax
  • keep the component within the DOM, but hide its contents, you can control that from within the component itself, either by CSS, or && syntax for unmounting some of it's children, but for example leaving the root mounted. CSS is probably preferred here though as its much faster and if you don't want to have to think about nested children unmounting and mounting.
user_18493580

Set the display property inside component main Div style attribute.


const Component = props => {
  const [hide, setHide] = useState(false)

  return (
    <div style={{display: hide ? 'hidden' : 'flex'}}> // Flex or any other valid display value
      <CloseButton onClick={() => setHide(true)}
      ...
    </div>
  )
}
user_98590160
Related