Search code examples
reactjsuse-statesimplemodal

Adding Modal on View button in Table

I want to add a modal on the view button on my table, When I clicked the view button, I want only the full name and the Department to be seen as Modal

How do I add modal on this table and select specific data

Here is my source code

https://codesandbox.io/s/crazy-shadow-xvolj

Solution

  • Create a new state hook

    const [modelState, setModelState] = useState({
    showModel: false,
    data: null
 })

    Also update the state on click on view

    onClick={() =>
   setModelState({ showModel: true, data: row })
}

    And design your model component declaring it in JSX

     {modelState.showModel && (
    <div>Model here {console.log(modelState.data)}</div>
  )}

    Fixed source code: https://codesandbox.io/s/romantic-edison-bughp