Conditional Rendering


In this tutorial we are going to learn about conditional rendering in react.js.


First create a class component and we have an array of items and for rendering that in a list.



Here is a new requirement if an array has a one element , so you want to render that otherwise render some message like “there is no element”.  


How can we implement this? Once again in jsx, unlike angular, we don't have if and else, because jsx is not a templating engine. So to render the element conditionally we need to go back to our plain javascript.  Here is one way to render by helping separate methode 

Called renderTags() in this method we can have our if and else statement.



By using if condition in renderTage() method we can define if the array having 0 element so render the <p> tag massage 


Output:-



code link




Post a Comment

0 Comments