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/

Is there a reason why you're not using the `react-modal` npm package? Also, please show the entire components. — Andrew, Dec 14 '17 at 21:22
I think you need to keep modal rendered but on the button click make it visible and hide. So CustomModal is always rendered but on button click u open or make it visible and the on modal click hide it again — Bhupendra, Dec 14 '17 at 21:26
Ahs found this, see if it helps https://stackoverflow.com/questions/44979037/opening-a-modal-with-the-click-of-a-button — Bhupendra, Dec 14 '17 at 21:27
@whoisthis doesn't need to be rendered all the time, can conditionally render it — azium, Dec 14 '17 at 21:30
@Andrew in the project I'm working on, they are not using react-modal and I honestly don't know why. What entire component should I show? the CustomModal? — Lizz Parody, Dec 14 '17 at 21:30
the answer to this is the same whether its a modal or any component that you want to display under certain states. have state that determines what gets rendered and call `setState` to change that state — azium, Dec 14 '17 at 21:31
We don't know what your current approach is. The only thing you've mentioned is that you're running functions. But what do these functions do and what does your page currently look like? We need to see your `render` function and what all of those functions are doing. Maybe you're already doing conditional rendering but messing it up somewhere. — Andrew, Dec 14 '17 at 21:47
@Andrew I updated my question :) let me know if that is enough information — Lizz Parody, Dec 14 '17 at 22:09

score 1 · Answer 1 · answered Dec 14 '17 at 21:45

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>

answered Dec 14 '17 at 21:45

Anil

31
1
5

score 1 · Accepted Answer · answered Dec 14 '17 at 22:47

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)

Render a modal when I click a button - React

2 Answers2