Toggle example in react js

• Create Components folder under src folder
• Add ToggleEXP.js file and add below Code

import React from "react";

class ToggleEXP extends React.Component {

constructor(props) {

super(props);

this.state = { isToggleOn: true };

}

handleClick = () => {

this.setState(prevState => ({

isToggleOn: !prevState.isToggleOn

}));

};

render() {

return (

<button onClick={this.handleClick}>

{this.state.isToggleOn ? "ON" : "OFF"}

</button>

);

}

}

export default ToggleEXP;

• Open App.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import ToggleEXP from "./components/ToggleEXP";

function App() {

return (

<div className="App">

<ToggleEXP />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output

Toggle example in React

• Create Components folder under src folder
• Add ToggleExp1.js file and add below Code

import React, { Component } from 'react';

class ToggleExp1 extends Component {

  state = {

    showDiv: false

  }

  toggleDivHandler = () => {

    const doesShow = this.state.showDiv;

    this.setState( { showDiv: !doesShow } );

  }

  render () {

    let divData = null;

    if ( this.state.showDiv ) {

      divData = (

        <div>

         My Data

        </div>

      );

    }

    return (

        <div className="App">

          <h1>Toggle Example</h1>

          <button

            onClick={this.toggleDivHandler}>Toggle Div</button>

          {divData}

        </div>

    );

  }

}

export default ToggleExp1;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import ToggleExp1 from './Components/ToggleExp1'

function App() {

  return (

    <div className="App">

     <ToggleExp1/>

    </div>

  );

}

export default App;

Output: