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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay