JAVASCRIPT

conditional props react

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

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

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