'Component to return something different depending on props

I know it may be a simple question, but I have a little problem in React, what condition to use so that when useFor is Card to return the first div, and when useFor is Details to return the second one.

const YoutubeEmbed = ({ embedId, useFor }) => (
  <>
    {useFor === "Card"}
    <>
      <div>
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
    </>
    {useFor === "Details"}
    <>
      <div className="video-responsive">
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
    </>

  </>
);

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired,
  useFor: PropTypes.string.isRequired
};

reactjs

Solution 1:^[1]

https://reactjs.org/docs/conditional-rendering.html You can use conditional render to render specific parts:

const YoutubeEmbed = ({ embedId, useFor }) => (
  <>
    {useFor === 'Card' && (
      <>
        <div>
          <iframe
            src={`https://www.youtube.com/embed/${embedId}`}
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            title="Embedded youtube"
          />
        </div>
      </>
    )}
    {useFor === 'Details' && (
      <>
        <div className="video-responsive">
          <iframe
            src={`https://www.youtube.com/embed/${embedId}`}
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            title="Embedded youtube"
          />
        </div>
      </>
    )}
  </>
)

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired,
  useFor: PropTypes.string.isRequired,
}

Solution 2:^[2]

How about using regular conditions?

const YoutubeEmbed = ({ embedId, useFor }) => {
    if (useFor === "Card") {
        return <div>
            <iframe
                src={`https://www.youtube.com/embed/${embedId}`}
                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                title="Embedded youtube"
            />
        </div>;
    }

    if (useFor === "Details") {
        return <div className="video-responsive">
            <iframe
                src={`https://www.youtube.com/embed/${embedId}`}
                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                title="Embedded youtube"
            />
        </div>;
    }
    
    return null;
}

YoutubeEmbed.propTypes = {
    embedId: PropTypes.string.isRequired,
    useFor: PropTypes.string.isRequired
};

Solution 3:^[3]

Use Ternary Operator for render with that condition in React:

const YoutubeEmbed = ({ embedId, useFor }) => (
  <>
    {useFor === "Card" ? <>
      <div>
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
    </>
    : useFor === "Details" ? <>
      <div className="video-responsive">
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
    </> : null
   }
</>
);

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired,
  useFor: PropTypes.string.isRequired
};

Solution 4:^[4]

Thanks a lot everyone, I just didn't know what to google, I actually used it like this, so that I do not repeat the same code twice.

const YoutubeEmbed = ({ embedId, useFor }) => (
      <div className={useFor === 'Card' ? "" : "video-responsive"}>
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
);

Solution 5:^[5]

you can use condition to return content based on useFor

const YoutubeEmbed = ({ embedId, useFor }) => {
    if (useFor === "Card"){
     return <div>
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
    }else if(useFor === "Details"){
      return <div className="video-responsive">
        <iframe
          src={`https://www.youtube.com/embed/${embedId}`}
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="Embedded youtube"
        />
      </div>
  }
  return null // if condition is not satisfied
};

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired,
  useFor: PropTypes.string.isRequired
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	szczocik
Solution 2	Thomas
Solution 3	VMT
Solution 4	Trif Ionut
Solution 5	BIPUL MANDOL

'Component to return something different depending on props

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]