React - Conditionally rendering component inside component

Question

In a React project, I have Itinerary.tsx, ItineraryDetails.tsx, Description.tsx, Weather.tsx and WeatherDetails.tsx components.

Inside Itinerary.tsx I have something like this:

<ItineraryDetails>
 <Description/>
</ItineraryDetails>

Inside Weather.tsx I have something like this:

<WeatherDetails>
 <Description/>
</WeatherDetails>

Inside Description.tsx I have several other elements and a link before a badge:

      <Link>
      </Link>
      <Badge>
      </Badge>

Since everything besides the link is the same for both Itinerary.tsx and Weather.tsx, can I use Description.tsx for both and somehow conditionally render the link only when inside Itinerary.tsx? Or is it better to create 2 "Descriptions"? I'm thinking that having 2 components so similar is a waste and it's not practical once you need to do changes.

I can't just add the link after ItineraryDetails or before Description because of the html elements' order (the link should appear before the badge).

Spectric · Accepted Answer · 2022-07-22 16:27:53Z

3

You could pass a property to the Description component:

{this.props.showLink && <Link></Link>}
<Badge></Badge>

And then use it like so:

<ItineraryDetails>
 <Description showLink />
</ItineraryDetails>
<WeatherDetails>
 <Description/>
</WeatherDetails>

answered Jul 22, 2022 at 16:27

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - Conditionally rendering component inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related