Render a modal when I click a button - React

Question

I have this "trash" button:

    <button
      type='reset'
      className='c-btn--ghost no-border'
      onClick={(e) => this.props.handleProjectDelete(e, project.id)}>
      <i className='fa fa-trash u-margin-right-tiny'/>
    </button>

This is the page with the button. And when I click it I want a component called CustomModal to render with this props:

  <CustomModal
    alternateModalClass='c-group-stickies-modal'
    onClosePress={this.handleCloseClick}
    alternateCloseButtonClass='c-group-stickies-modal__close-button'
    text={'are you sure you want to delete it?'}
  />

So a modal like this can appear:

But I don't know how to do that.

This is the component that has the trash button: https://jsfiddle.net/10u6pfjp/

And this is the CustomModal component: https://jsfiddle.net/cp29ms8g/

Answer 1

I hope you can do this as below

<button
type='reset'
className='c-btn--ghost no-border'
onClick={(e) => {
this.props.handleProjectDelete(e, project.id);
this.renderModal;
}}>
<i className='fa fa-trash u-margin-right-tiny'/>
</button>

Answer 2

As others have mentioned, you should be approaching this with a conditional statement as to whether or not your modal should appear by having a variable in this.state . Change it in your button onClick . Since you now have 2 functions to run, I made a new function called handleProjectDelete in your component to handle both at once.

At the bottom of your render , you'll see that I added the conditional where you should place a modal. I used <Modal/> as a placeholder. Use CSS to force it into a position that's appropriate for a modal.

const MAX_PROJECTS_PER_PAGE = 10

export class ProjectsTable extends Component {
    constructor() {
    super()
    this.state = {
        showModal: false
    }
  }

  componentWillReceiveProps(nextProps) {
    const { history, organizations, hasFetched } = nextProps
    if (!deepEqual(this.props, nextProps) && hasFetched) {
      if (!organizations || organizations.isEmpty()) {
        history.push('/beta-code')
      }
    }
  }

  handleProjectDelete(e, project.id) {
    this.setState({showModal: true})
    this.props.handleProjectDelete(e, project.id)
  }

  renderProjectsTable() {
    const { projects } = this.props
    const projectsWithoutDefault = projects.filter(proj => proj.name !== 'default')
    const projectsTable = projectsWithoutDefault.map((project) => {
      return ({
        name: <NavLink to={`/projects/${project.id}`}> {project.name} </NavLink>,
        team: <UsersList users={fromJS(project.users)} showBadge showMax={5} type='list' />,
        retro:
        (project.lastRetro)
        ? <NavLink className='c-nav-link'
            exact to={`/retrospectives/${project.lastRetro.id}`}>
              {moment.utc(project.lastRetro.date)
                .format('dddd, DD MMMM YYYY').toString()}
          </NavLink> : <div>No retros found</div>,
        delete:
        <div className='delete-align'>
        <button
          type='reset'
          className='c-btn--ghost no-border'
          onClick={(e) => this.handleProjectDelete(e, project.id)}>
          <i className='fa fa-trash u-margin-right-tiny'/>
        </button>
      </div>
      })
    })
    return projectsTable
  }


  render () {
    return (
      <div className='o-wrapper u-margin-top'>
        <TablePagination
          title='Projects'
          data={ this.renderProjectsTable()}
          headers={['Name', 'Team', 'Last Retrospective', '    ']}
          columns='name.team.retro.delete'
          nextPageText='>'
          prePageText='<'
          perPageItemCount={ MAX_PROJECTS_PER_PAGE }
          totalCount={ this.renderProjectsTable().length }
          arrayOption={ [['size', 'all', ' ']] }
        />
        { this.state.showModal ? <div className='delete-modal'><Modal/><div/> : null }
      </div>
    )
  }
}
const mapStateToProps = ({
  projects
}) => ({
  hasFetched: projects.get('hasFetched'),
  projects: projects.get('projects')
})

ProjectsTable.defaultProps = {
  projects: []
}

export default connect(mapStateToProps)(ProjectsTable)