Rendering different elements conditionally in React.js

manpreet Best Answer 2 years ago

I have a react component named JourneyTripComponent. I want to use it in a page where I don't want to render a Row element which is inside this component.

 <Container>
      <Row spacing={"40px"} >
        <CustomColumn sm={12} padding={"20px 0px 40px 0px"}>
          <Row className="justify-content-between" >
            <Text size={3.5} color={"#4A494B"} inline >
              {intl.formatMessage(messages.header)}
            Text>
            <MediaQuery query="(min-width: 768px)">
              {
                this.props.home ? <Anchor
                  size={1.6}
                  color="#79C142"
                  padding={"10px 0px 0px 0px"}
                  to="about-us"
                  inline
                >
                  {intl.formatMessage(homeMessage.section4_learnMore)} <LearnMoreIcon />
                Anchor>
                  : null
              }
            MediaQuery>
          Row>
          <Row>
            <CustomColumn sm={8}  padding={"20px 0px 5px 0px"} >
              <Text size={2} color={"#4A494B"} >
                {intl.formatMessage(messages.subHeader)}
              Text>
            CustomColumn>
          Row>
        CustomColumn>
      Row>
     Container>

I don't want to render the Row with subHeader. I understand that I need to add some conditions to my props but not quite sure how to do it being new to reactjs. Any help on this?

manpreet 2 years ago

You can pass something like props.showSubHeader, and while rendering, only show Row with subHeader if props.showSubHeader is true.

...
{props.showSubHeader && 
  <Row>
    <CustomColumn sm={8}  padding={"20px 0px 5px 0px"} >
      <Text size={2} color={"#4A494B"} >
         {intl.formatMessage(messages.subHeader)}
      Text>
    CustomColumn>
  Row>}