conditional react return statement

Question

Is there a way to avoid the if and probably use a ternary or logical && for below scenario. Looks like react always looks for a an explicit return statement always for any component

const reactComp = ({ abc, xyz }) => {
if (something) {
    return (
       <Grid.Container>
        <Grid.Row>
          <Grid.Col md="6">
            <Panel title="Title">
               <Text>{mmmm}</Text>
            </Panel>
          </Grid.Col>
        </Grid.Row>
      </Grid.Container>
    );
  } else {
    return null;
  }
};

joshmillgate · Accepted Answer · 2020-11-24 17:53:25Z

1

You can write a conditional statement directly within the return statement in the component. Here's an example of using a ternary operator. I have included something && something to make sure that something exists before running the conditional.

const ReactComp = ({ abc, xyz }) => {
    return (
     // Ternary operator within curly braces 
     // if something exists and if something
     { something && something ?
       // the return the following
       <>
       <Grid.Container>
        <Grid.Row>
          <Grid.Col md="6">
            <Panel title="Title">
               <Text>{mmmm}</Text>
            </Panel>
          </Grid.Col>
        </Grid.Row>
      </Grid.Container>
      </>
     // else
     : 
     // return the following
      <SomethingElse/> // or null 
     // close curly braces
     }
    );
};

edited Nov 24, 2020 at 17:53

answered Nov 24, 2020 at 12:01

joshmillgate

763 bronze badges

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

1 Comment

Mythpills Over a year ago

had to use the <> fragment just after the return to get this working. now i realise there are so many ways to do this :)

Gabriel Petersson · Accepted Answer · 2020-11-24 11:56:31Z

0

First of React components MUST to start with a big character, in this case ReactComp

If react believes it will not return anything, you could solve it by the following. It is also more clean.

if (!something) return null
 return (
       <Grid.Container>
        <Grid.Row>
          <Grid.Col md="6">
            <Panel title="Title">
               <Text>{mmmm}</Text>
            </Panel>
          </Grid.Col>
        </Grid.Row>
      </Grid.Container>
    );
  }

answered Nov 24, 2020 at 11:56

Gabriel Petersson

10.7k4 gold badges41 silver badges50 bronze badges

1 Comment

Gabriel Petersson Over a year ago

@user13021487 Cool! Consider marking the answer with the best solution as the answer by filling the grey "Mark as solution" button and upvoting the answers that helped out.

usafder · Accepted Answer · 2020-11-24 12:12:32Z

0

Yes, you can use the ternary operator to avoid multiple return statements as shown below:

const reactComp = ({ abc, xyz }) => (
  something ? (
    <Grid.Container>
      <Grid.Row>
        <Grid.Col md="6">
          <Panel title="Title">
            <Text>{mmmm}</Text>
          </Panel>
        </Grid.Col>
      </Grid.Row>
    </Grid.Container>
  ) : null
);

edited Nov 24, 2020 at 12:12

answered Nov 24, 2020 at 12:05

usafder

8166 silver badges20 bronze badges

Collectives™ on Stack Overflow

conditional react return statement

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related