Issues manipulating css with react - css

Question

hope any of you could help me out in here...
On the code below I have 2 separete elements which I want to show one at the time.
first element is an iframe
second is a Div
the ideia is if the user click on the {title} then the frame disaper and the div appear.
I can manage to make the frame disapper and appear by clicking on the title, but the same does not happen with the div.
the code is basically the same, so I don't really get why is the div not having the same behavior then the frame.
Also I double checked and both css classes get changed as expected, just that the css class seems not to work on the Div.
Tks in advance.
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;

Answer 1

className={`${content ? 'content_site' : 'content_frame'}`}
and
className={`${content ? 'content_frame' : 'content_site'}`}
are contrandicting each other because both are expecting content to be true change one to be !content
change the second one as you can see in your method setContent(!content)}
like this:
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${!content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;