dynamic-classes.md

Exercise: Dynamic CSS Classes

Your task is to dynamically apply a CSS class (active) to the <p>Style me</p> element in the provided React app. This task is therefore very similar to the previous coding exercise but you're now going to set a CSS class dynamically - instead of an inline style.

The style should be applied as an CSS class (i.e., via the className attribute / prop) when the <button> is clicked for the first time. Once the button is clicked again, all CSS classes should be removed from the <p> element (this should also be the initial state).

Make sure that the button toggles between these two styles (no CSS class <=> active  CSS class).

Here's how the finished app should look like BEFORE the button was clicked:

Here's how it should look like AFTER the button was clicked:

And here's how it should look like when the button was clicked again:

Important: Use *React.useState()* instead of just *useState()* as the latter can cause problems in this Udemy code environment.

Starter Code:

import React from "react";

// don't change the Component name "App"
export default function App() {
  return (
    <div>
      <p>Style me!</p>
      <button>Toggle style</button>
    </div>
  );
}

Style.css:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 3rem;
  background-color: #2d2c2c;
  color: #959090;
  text-align: center;
}

.active {
  background-color: orange;
  padding: 0.5rem;
  border-radius: 4px;
  color: black;
}

Solution Code:

import React from "react";

// don't change the Component name "App"
export default function App() {
  const [toggle, setToggle] = React.useState(false);
  const toggleHandler = () => {
    setToggle(!toggle);
  };

  return (
    <div>
      <p className={`${toggle ? "active" : ""}`}>Style me!</p>
      <button onClick={toggleHandler}>Toggle style</button>
    </div>
  );
}