<img src={this.state.photo} alt="" style={ isLoggedIn ? { display:'block'} : {display : 'none'} }
/>
// or
<img src={this.state.photo} alt="" style={ { display: isLoggedIn ? 'block' : 'none' } }
/>

class App extends Component { constructor() { super() this.state = { isRed: true } } render() { const isRed = this.state.isRed return <p style={{ color: isRed ? 'red' : 'blue' }}>Example Text</p> }
}

class Component extends React.Component {	const a = true	render() { return (	<Container> {a == true ? (<Button/>) : null } </Container> )	}
}
This is staying: if a == true, render a button component.
Otherwise render null, in other words nothing.

render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.	</div> );
}

renderElement(){ if(this.state.value == 'news') return <Text>data</Text>; return null;
}
render() { return ( <View style={styles.container}> { this.renderElement() } </View> )
}

render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div> );
}

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );
}

/*
&& works best in conditionals that will sometimes do an action, but other times do
NOTHING at all.
*/
const tasty = ( <ul> <li>Applesauce</li> { !baby && <li>Pizza</li> } { age > 15 && <li>Brussels Sprouts</li> } { age > 20 && <li>Oysters</li> } { age > 25 && <li>Grappa</li> } </ul>
);
/*
If the expression on the left of the && evaluates as true, then the JSX on the
right of the && will be rendered. If the first expression is false, however, then
the JSX to the right of the && will be ignored and not rendered.
*/

condition ? true : false

Condition ? Block_For_True : Block_For_False

<Fragment> {showMyComponent ? <MyComponent /> : <OtherComponent />}
</Fragment>

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render( <Mailbox unreadMessages={messages} />, document.getElementById('root')
);

//In This Case Both will Show Data
<ProductBlocks ProductData={ProductData.forth_component.top} mainfeature={ProductData.forth_component.bottom} />
Passing Component using Props
// it Will only Show *ProductData
<ProductBlocks ProductData={ProductData.forth_component.top} />
{ProductData && <Box > //Your Code </Box> }
// it Will only Show *mainfeature
{mainfeature && <Box > //Your Code </Box> }
//If One of data is missing it will not call the section
// *Note Single Component Having Two HTML Section