CODEWITHSUNDEEP
reactjsjsx
Hitman DD
Hitman DD

Reputation: 67

How to dynamically add a CSS class to a div in a component

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

Upvotes: 0

Views: 613

Answers (1)

luckongas
luckongas

Reputation: 1799

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

Upvotes: 2

Related Questions