How to show the content without showing button using reactjs?

Question

My objective is to show only the email component while we click on emailid (instead of showing button namely "show modal"). I mean when we click on email id then the modal should get popup instead of showing button "show modal". Can anyone help me with this problem to get solved?

Here is the code:

<Table.Body>
  <Table.Row>
    <Table.Cell>First Name</Table.Cell>
    <Table.Cell>
      <Link to="/Email">abc@yahoo.com</Link>
    </Table.Cell>
    <Table.Cell>01-01-2020</Table.Cell>
  </Table.Row>
</Table.Body>

Here is the whole code: "https://codesandbox.io/s/so-answer-60873116-98xnt"

Can anyone help me with this query?

Answer 1

You want to add an open state and redirect to root on close, all this while using the open property of Modal component:

<Container>
  <Modal
    open={this.state.open}
    onClose={() => {
      this.setState({ open: false });
    }}
  >
   ...
  </Modal>
  {!this.state.open && <Redirect to={`/`} />}
</Container>

See sandbox attached