Make CSS Background disappear onclick with React

February 8, 2022

The style within the div creates a red box. Upon clicking I want to remove it. Have tried implementing state but it wasn’t working.

import React, { Component } from "react";

class ClickMe extends Component {
  render() {
    return (
      <div>
        <h1>Disapearing Box</h1>
        <h3>Click the Box, I dare you</h3>
        <div
          style={{
            height: "400px",
            width: "400px",
            background: "#ef8989",
            margin: "auto",
          }}
        ></div>
      </div>
    );
  }
}
export default ClickMe;

    );
  }
}
export default ClickMe;

>Solution :

try it:

import React, { useState } from "react";

const ClickMe =() => {
  const [active, setActive] = useState(false)

  return (
    <div onClick={() => setActive(!active)}>
      <h1>Disapearing Box</h1>
      <h3>Click the Box, I dare you</h3>
      <div
        style={{
          height: "400px",
          width: "400px",
          background: active ? "none" : "#ef8989",
          margin: "auto",
        }}
      ></div>
    </div>
  );
}

export default ClickMe;