Looking for some assistance here...
In the code snippet below, I have two separate elements that I want to display one at a time.
The first element is an iframe and the second is a div.
The idea is that if the user clicks on the {title}, the frame disappears and the div appears.
I've been able to make the frame disappear and appear by clicking on the title, but the same does not happen with the div.
Even though the code is essentially the same, I'm confused as to why the div isn't behaving like the frame.
I've double-checked and confirmed that both CSS classes are being changed as expected; it's just that the CSS class doesn't seem to work on the div.
Thanks in advance for any help!
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"> Send</button>
</form>
</div>
</div >
)
}
export default Card;