I have a class in the CSS file of a certain component, this class would make some elements in the component not visible. I wanna add this class to the div only when I click a button, which happens to be in an entirely different component. I know how I'd do this using Vanilla javascript but with React I'm clueless.
I've decided to make it easier to check it out/edit with,
CodeSandbox: https://codesandbox.io/s/pedantic-keldysh-yhw2m?file=/src/components/FaceRecogBox/FaceRecogBox.css
PS: In the FaceRecogBox component I'm trying to add the .vanish class to the main-container div, using the button in LinkedInput.js
-
What do you mean? This is me learning ReactHitman DD– Hitman DD2020-12-30 20:51:03 +00:00Commented Dec 30, 2020 at 20:51
-
where in your code is the button you want to click to make the div vanish?Christian Fritz– Christian Fritz2020-12-30 20:55:55 +00:00Commented Dec 30, 2020 at 20:55
-
Yeah I've done that and because I don't wanna stay in course hell I'm starting my own projects as a way of learning. Your statement before was kinda... unwarrantedHitman DD– Hitman DD2020-12-30 20:58:52 +00:00Commented Dec 30, 2020 at 20:58
-
@Christian Fritz the button in the LinkInput.jsHitman DD– Hitman DD2020-12-30 21:02:29 +00:00Commented Dec 30, 2020 at 21:02
Add a comment
|
1 Answer
You could do as follows:
import React from 'react';
import '../FaceRecogBox/FaceRecogBox.css'
const FaceRecogBox = ({ imageUrl, isDivVisible }) => {
// You should pass the condition as a prop to the FaceRecogBox
return (
<div>
<div className={`main-container ${!isDivVisible && "vanish"}`}>
<div className="brokenlines-container">
<h3>Drag and drop to upload <br/> Or <a href="/">browse</a> this device</h3>
</div>
</div>
<div className="faces">
<img src={imageUrl} alt="" className="faces"/>
</div>
</div>
);
}
export default FaceRecogBox;
I'll leave the link to the sandbox updated
1 Comment
PRSHL
you also can use the ternary operator to choose between different styles depending on a boolean like
<div className={`main-container ${!isDivVisible ? "vanish" : "theOtherClass"}`}>