How do I tell if a prop was passed in a react component

Question

I have a react function component, This function takes in some props.

I want to know if the component had a specific prop passed to it.

Say I have a component, Song, that takes in 1 prop, Genre. I would want to know if the component when used was used with the genre prop.

examples:

• genre not passed:

<Song></Song>

• genre passed:

<Song genre="Rap"></Song>

edit: clarity

Answer 1

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.

Answer 2

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.

Answer 3

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