Respond Plus Hooks Modal

respond-plus-hooks-modal.js

const MyRespondModal = (props, state, actions) => (
  <Modal
    visible={!!state.modalText}
    text={state.modalText}
    onClose={actions.cancel}
    onSubmit={actions.confirm}
  />
)

const Modal = ({ visible, text, onClose, onSubmit }) => {
  const [show, setVisible] = useState(visible)
  useEffect(() => setVisible(visible), [visible])

  console.log('render', show) // this will render 2x instead of 1x
  
  if (!show) return null

  const close = () => {
    setVisible(false)
    onClose && onClose()
  }

  const submit = () => {
    setVisible(false)
    onSubmit && onSubmit()
  }

  return (
    <div>
      <span onClick={close}>x</span>
      <h1>{text}</h1>
      <button onClick={submit}>SUBMIT</button>
    </div>
  )
}

Basically, this can be achieved with getDerivedStateFromProps in a class component, but not with hooks.

What's really going on? What's the real goal?

The real goal is a component that is both managed and unmanaged. Both controlled from the outside and the inside.

• OUTSIDE: props.visible toggles visibility
• INSIDE: close and submit can toggle visibility inside

There are ways to make it work, i.e. we could pass the parent's setVisible handler to the child (and therefore only the parent sets visibility), but this defeats the purpose. The purpose is so Redux can "drive" a modal component like this with a simple boolean value.