I am trying to use dynamic data to change and trigger classnames but it always only result to true despite data containing false. Any solution?

Question

I am trying to dynamically change the styles based on ternary classnames. I am trying to change the background to dark or light based on the input on the workWrapper in here:

The CSS:

.normColor{
  background-color: #f3f3f3;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.normColor .dark{
  background-color: #232A4E;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

I already tried messing around with the component, searching for other similar issues to mine and trying to search youtube videos regarding it but I cannot find any solution.

Answer 1

You forget to de-structure your props.

try this :-

const WorkSection = ({workWrapper}) =>{
    return(<div className={workWrapper?'normColor':'dark'}></div>)
}

And you checking props, if it is null or not. And it will always give you true, because components always have props