React: Toggle Title Visibility

Toggle a heading visibility with a button — a basic interactive behavior in React.

State and events. Learn to manage visibility via state and click handlers.

What To Do

Add visibility state: const [visible, setVisible] = useState(true).
Implement click handler: invert the state on button click.
Update button text: Hide when visible, Show when hidden.

Final View

A card with a heading and a button that toggles visibility. Final result should look like this:

👀 Solution

import React, { useState } from 'react';
import './styles.css';
 
export function ToggleTitle({ initialVisible = true, title = 'Title' }) {
  const [visible, setVisible] = useState(initialVisible);
  function handleToggle() {
    setVisible(v => !v);
  }
  return (
    <article className="toggle-card">
      {visible && <h3 className="toggle-title">{title}</h3>}
      <button className="action-button" onClick={handleToggle}>
        {visible ? 'Hide' : 'Show'}
      </button>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <ToggleTitle initialVisible={true} title="Section Title" />
      </section>
    </main>
  );
}

🧑‍💻 It's not a bug! It's a feature!

The code editor is intentionally hidden on mobile.

Believe me, it's for the best: I am protecting you from the temptation to code in less-than-ideal conditions. A small screen and a virtual keyboard are not the best tools for a programmer.

📖 Now: Study the task, think through the solution. Act like a strategist.

💻 Later: Sit down at your computer, open the site, and implement all your ideas comfortably. Act like a code-jedi!