Using click events on button click

Question

I am new to React and let's suppose we have the following piece of code.

const showDetails = () => {
    console.log('Show details')


}
const template = (
    <div>
        <h1>Vibility Toggle</h1>
        <button onClick={showDetails}>Show details</button>
    </div>
)

var app = document.getElementById('app')

ReactDOM.render(template, app)

What I want is to change the button's title from Show Details to Hide Details when it is clicked. So I' ve thinking to get the click event inside the function and change the title by using a ternary operator. How to do that?

Thanks Theo.

ankitkanojia · Accepted Answer · 2020-04-08 04:59:07Z

3

you can use the state to handle toggle event in react. I have added a snippet of toggle handler.

import React, { Component } from 'react';

class App extends Component {

    state = {
        isVisible : true
    }

    toggleDetails = () => {
        this.setState({
            isVisible : !this.state.isVisible
        });
    }

    render() {
        return (<div>
            <h1>Vibility Toggle ({this.state.isVisible ? "is Visible" : "is Not Visisble"})</h1>
            <button onClick={this.toggleDetails}>{!this.state.isVisible ? "Show details" : "Hide details"}</button>
        </div>)
    }
}

export default App;

answered Apr 8, 2020 at 4:59

ankitkanojia

3,1224 gold badges24 silver badges37 bronze badges

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

Comments

Luís Ramalho · Accepted Answer · 2020-04-08 05:03:13Z

1

You can also keep it simple by doing something like:

let show = true;

const showDetails = event => {
  show = !show;
  event.target.innerHTML = show ? "Show Details" : "Hide Details";
};

const template = (
  <div>
    <h1>Vibility Toggle</h1>
    <button onClick={showDetails}>Show Details</button>
  </div>
);

var app = document.getElementById("app");

ReactDOM.render(template, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

answered Apr 8, 2020 at 5:03

Luís Ramalho

10.2k4 gold badges54 silver badges69 bronze badges

Comments

Nikas · Accepted Answer · 2020-04-08 05:01:34Z

you need to use state in React.please read this documentation for state in React React State. here is the sample code to change title using ternary operator in React

import React, { Component } from 'react';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showDetails: true
        }
    }

    showDetails = () => {
        console.log('Show details')
        this.setState({ showDetails: !this.state.showDetails })
    }

    render() {
        return (
            <div>
                <h1>Vibility Toggle</h1>
                <button onClick={() => this.showDetails()}>{this.state.showDetails ? 'Show Details' : 'Hide Details'}</button>
            </div>
        )
    }
}
export default App

Collectives™ on Stack Overflow

Using click events on button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related