My goal is to build comment section that appears and disappears on a toggle click button.
I have the following structure:
set Button state:
const [showButton, toggleShowButton] = useState(false)
Button:
<button className="comment-button" onClick={() => toggleShowButton(!showButton)}>{showButton ? "Hide comments" : "Show comments"}</button>
Conditional html block:
{showButton &&
(
<div className="article-comment-section">
{article.comments && article.comments.map(x =>
<CommentCard key={x._id} {...x} />
)}
{isAuthenticated && <AddComment onCommentSubmit={onCommentSubmit} />}
</div>
)}
The block should appear and disappear on a button click, but it doesn't
I tried to put and an invalid classNames, and then my button works. But I still want to have my styling on.
Apparently the problem comes from the classNames.
How should I apply them so they work?
