DEV Community

Aliafify
Aliafify

Posted on

4 3

#3 React Coding - Show/Hide An Element (Exercise)

/**
  Challenge: Make the button functional
  A click on button should toggle (show/hide) the string `Toggle Challenge` each time it is pressed

  Solution: https://codepen.io/angelo_jin/pen/abLwyrL
  Video for reference: https://youtu.be/VzNNjNmbXpY
**/
function App() {
  const [visible,setVisible] = React.useState(true);

  return (
    <>
      <button onClick={()=>setVisible(!visible)}>{visible?"Hide Element Below":"show Element Below"}</button>

      {visible&&(<div>Toggle Challenge</div>)}
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
Enter fullscreen mode Exit fullscreen mode

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