The goal is to make a block appears and disappears on a button click.

my code:

const [showButton, toggleShowButton] = useState(false)

<span className=”show-button”>
    <button className=”comment-button” onClick={() => toggleShowButton(!showButton)}>{showButton ? “Hide comments” : “Show comments”}


{showButton &&
    (<div className=”article-comment-section”>
    {article.comments && article.comments.map(x =>
     <CommentCard key={x._id} {…x} />

{isAuthenticated && <AddComment onCommentSubmit={onCommentSubmit} />}


where “article-comment-section” is valid class in my css style sheet.

My block don’t show up.

When I put invalid classname for example “articleCommentSection”, which is not present in my css style sheet.

My logic work, the block appears on click as its is expected, but styles are broken.

I assume, the way I pass the className is wrong. Any Idea how to do it?

I wanted to add some pictures so you can see better. But seems like I can’t do it.

Plamen Asked question April 14, 2023