DEV Community

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

Posted on

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


import React, {useState} from 'react';

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

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

export default Toggle;

Enter fullscreen mode Exit fullscreen mode


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

Live Preview
Source Code

Top comments (0)