DEV Community

Cover image for Week 3 - Toggle App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

2 2

Week 3 - Toggle App

Welcome to Week 3 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .


Toggle App

toggle app

This week we created a toggle app that show and hide content when click on button in react.

To create a toggle component; We have to :

  • Create a state that holds the button status.
  • The button status either is shown or not.
  • When clicking on the button, fire the setShow method.
  • setShow method reverses the current show state.
  • if the show state is true, show <h2> on the screen and toggle "Hide Welcome" on the button.
  • if the show state is false, Don't show the message on the screen and toggle "Show Welcome" on the button

Code

import React, {useState} from 'react';

const Toggle = () => {
    const [show, setShow] = useState(true);

    return (
        <div className="showHide">
            <h2>Toggle</h2>
            <div>
                <button onClick={() => setShow(!show)}>
                    {show ? "Hide Welcome" : "Show Welcome"}
                </button>
                {show && <h2>Hi, How are you ? </h2>}
            </div>
        </div>
    );
}

export default Toggle;

Enter fullscreen mode Exit fullscreen mode

Conclusion

Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more