Change CSS property dynamically based on Update in redux state using ReactJs

Question

I have a component that I want to show when particular boolean in state management is true.

  return (
    <>
    {showCustomers === true ? //Change the css property : console.log("Do nothing")}
        <div class={TestDisplay}>
        //Run a third party function that does multiple things but will also change the showCustomers to true.
    <ThirdParty></ThirdParty>
       </div>

   </>
)

.TestDisplay {
display:none;
}

So what I want to do is call third party component which I do not have any control on. It will call APIs and get the results and then in the end it changes the showCustomers state variable to true. I want to then change the css property of TestDisplay to display block instead of none.

Is that possible or what should be best possible way to run the component but then show it once showCustomers is true.

Answer 1

You should be able to do the following

<div className={showCustomers === true ? TestDisplay : ""}>

This way you can remove and add the css classes on the Div.