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.