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;
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;