JAVASCRIPT

react native conditional rendering

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.

conditional props react

// single prop
propName={ condition ? something : somethingElse }
propName={ condition && something }
// multiple props
{ ...( condition ? { ...setOfProps } : { ...setOfOtherProps })}
{ ...( condition && { ...setOfProps })}

react native conditional rendering

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

conditional rendering react

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')
);

react conditionals

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

Conditional Rendering in React using Props

//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 and One of data is missing it will not call the section 
// *Note Single Component Having Two HTML Section