• If there are no children within your component, use a self-closing tag:

// good
<Button onPress={handlePress} />

// bad
<Button onPress={handlePress}></Button>

• If you need to display a component based on some condition, then use the && operator:

// bad
function HelloComponent(props) {
    if (isSomeCondition) {
return <p>Hello!</p>;
    }
return null;
}

// bad
const HelloComponent = () => {
  return isSomeCondition ? <p>Hello!</p> : null
};

// ok (probably it will require some logic before return)
const HelloComponent = () => { return isSomeCondition && <p>Hello!</p> };

// almost good (isSomeCondition can be passed using props)
const HelloComponent = () => isSomeCondition && <p>Hello!</p>;

// best: use above solution but within encapsulating component
// this way HelloComponent is not tightly tied to isSomeCondition

const HelloComponent = () => <p>Hello!</p>;
const SomeComponent = () => (
    // <== here some component JSX ...
   isSomeCondition && <HelloComponent />
    // <== the rest of encapsulating component markup here
);

The preceding practices only apply if the other option is null. If the false case is also a component, you can use the b ? x : y operator or even a simple if-else approach, however, it should comply with your project's best practices.

• If you use the b ? x : y operator, then you may find that curly braces ({}) come in handy:

const SomeComponent = (props) => (
<View>
        <Text>{props.isLoggedIn ? 'Log In' : 'Log Out'}</Text>
    </View>
);

• You can also use curly braces ({}) to destructure props objects:

const SomeComponent = ({ isLoggedIn, ...otherProps }) => (
<View>
        <Text>{isLoggedIn ? 'Log In' : 'Log Out'}</Text>
    </View>
);

• If you want to pass isLoggedIn as true, you can do so by just writing the prop name:

// recommended
const OtherComponent = () => (
    <SomeComponent isLoggedIn />
);

// not recommended
const OtherComponent = () => (
    <SomeComponent isLoggedIn={true} />
);

• In some cases, you may want to pass on all of the other props. You can use the spread operator in such a case:

const SomeButton = ({ type , ...other }) => {
const className = type === "blue" ? "BlueButton" : "GrayButton";
    return <button className={className} {...other} />;
};