React return component onclick

Question

I'm trying to return a component when I click on a button. (a delete button with a confirmation popup) I've tried some examples I found online but none really worked for me.

Here is my code:

class DeleteTask extends React.Component {
  handleClick() {
        return <TaskDeleteModal />
    }
  render() {
    return (
        <div>
            <button type="button" className={styles.deletetask} onClick={() => this.handleClick()}>Verwijderen</button>;
        </div>
    )
  }
}

Thanks for reading, I hope you can assist me.

Tony Nguyen · Accepted Answer · 2020-05-28 23:30:27Z

1

It did not work because the return <TaskDeleteModal /> of handleClick does not add <TaskDeleteModal /> to your render function. You need to add <TaskDeleteModal /> to render function and control it visibility by a state: Try the following code:

class DeleteTask extends React.Component {
  this.state = {
    showModal: false
  }
  handleClick() {
        this.setState({showModal: true})
    }
  render() {
    return (
        <div>
            <button type="button" className={styles.deletetask} onClick={() => this.handleClick()}>Verwijderen</button>;
            {/* In TaskDeleteModal you might have a button, when you click on that button call this.setState({showModal: false}) to hide the modal */}
         {this.state.showModal && <TaskDeleteModal />}
        </div>
    )
  }
}

answered May 28, 2020 at 23:30

Tony Nguyen

3,49814 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nillavanilla · Accepted Answer · 2020-05-28 23:50:17Z

0

class DeleteTask extends React.Component {
  this.state = {
    showModal: false
  }
  handleClick() {
        this.setState({showModal: true})
    }
  render() {
    return (
        <div>
            <button type="button" className={styles.deletetask} onClick={() => this.handleClick()}>Verwijderen</button>;
            {/* In TaskDeleteModal you might have a button, when you click on that button call this.setState({showModal: false}) to hide the modal */}
         {this.state.showModal && <TaskDeleteModal />}
        </div>
    )
  }
}

answered May 28, 2020 at 23:50

nillavanilla

111 bronze badge

Collectives™ on Stack Overflow

React return component onclick

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related