Conditional statements to show a different component React js-CodePudding

i want to create a function or a conditional statement you can say that can show different components based on "If the user have bought products" then show the products components otherwise show "just a simple text like browse or buy products."

 <div>
 <Bookscard />
 </div>

so this is my component, inside the component the purchased products are being mapped. Can i get a conditional statement that can either show this component like ( if user.courses is greater than or equal to 1 then show the component otherwise show a text ) something like this

CodePudding user response：

You can try this:

<div>
 { user.courses.length > 0 &&
 <Bookscard />
 }
 { user.courses.length > 0 ||
 <NoResults />
 }
</div>

Or you can keep consistency with && by:

<div>
 { user.courses.length > 0 &&
 <Bookscard />
 }
 { user.courses.length == 0 &&
 <NoResults />
 }
</div>

CodePudding user response：

Adding up to @Antoine Baqain's answer, you could use ternary operator too, like this:

<div>
 { user?.courses?.length > 0 ? <Bookscard /> : <NoResults /> }
</div>