You can just check for the undefined value for the description.

for example:

const MyComponent = ({ title, description }) => {
    return (
        <div class ="card">
            <div class="card-header">{title}</div>
            {description && <div class="card-body">{description}</div>}
        </div>
    )
}

In above example I have used conditional rendering to meet your requirement.

maybe you must create the functional compontent that receive props from parent genre and the default props of genre is all, maybe the component will look like this:

const Song = ({ genre="all" }) => {
   if(genre === "all") {
     return(
        <div>this song list has a all genre</div>
     )
   } else if(genre === "Rap") {
     return(
        <div>this song list has a genre {genre}</div>
     )
   }
}

if we set default props so when from the parent component did not send props genre the default props of genre in song (which is "all") component will be applied.

put this in your function component return statement

genre can be switched for any prop, actually anything that returns true, false, 1, or 0

{props.genre != undefined && // if genre is not(!=) undefined, which happens when you dont pass the genre prop when using the component, it will run the code. the && means AND, which is true when the left operand is true and the right operand is true (the JSX returns true, i wont get into why)
 <Card.Subtitle>
   {props.genre}
 </Card.Subtitle>
}

edit: tried to add some clarity