reactjs - React function displayBanner = () => {

Question

I am currently working on a project and trying to attempt to hide a banner by changing the state of a className like the following:

<div?className={visbilityBanner}>

I have a Hide Banner button like the following:

 <button
????type="button"
????className="btn?btn-secondary?btn-sm"
????size="small"
????style={hideButtonsStyle}
????onClick={(e)?=>?displayBanner(e)}
????>
???????Hide?Banner
????</button>

My train of thought is the solution needs a function called displayBanner. In the code below it checks if the !bannerHdr && !bannerMsg (if no text the variables are undefined) then change className = 'hide' the banner else className = 'show'

const?displayBanner?=?()?=>?{
????const?[visbilityBanner,?setVisbilityBanner]?=?useState('show');

????if?(!bannerHdr?&&?!bannerMsg)?{??????????????????
??????setVisbilityBanner('hide');??????
????????console.log(visbilityBanner);?????
????????return?visbilityBanner;
????}?
????setVisbilityBanner('show');?????
??????console.log(visbilityBanner);
??????return?visbilityBanner;
????};

However, I am getting a compile error:

Failed to compile

Failed to compile
./src/components/Banners.js
  Line 220:  React Hook "useState" is called in function "displayBanner" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  Line 249:  'visbilityBanner' is not defined                                                                                                         no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

Can anyone assist in explaining what I?am missing?

Answer 1

The logic should be a part of the style prop:

<HeaderWrapper style={{ visibility: props.isBannerVisible ? 'hidden' : 'none' }}>

If you still want to have a function you should return an object instead of a string, so it will match the style prop:

function hideBanner(isBannerVisible) {
  return { visiblity: isBannerVisible ? "hidden" : "none" };
}

<HeaderWrapper style={{ ...hideBanner(props.isBannerVisible) }} />;