Using Conditional Rendering and displaying lists in ReactJS


When using conditional rendering, it is important to first create a list using an object and then output that object in the render section. We can use the map function to iterate through the array of objects to add data to the variable.

Given the code below, we use the map() function to take an array of numbers and add it to an unordered list with their values. We assign the new array returned by map()

See the Pen List of Numbers by Dan Abramov (@gaearon) on CodePen.

Conditional Rendering Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

In the following example, we will create an input field (in App component) with a change listener which outputs the length of the entered text below it (e.g in a paragraph). Next we will create another component (=> ValidationComponent) which receives the text length as a prop. Inside the ValidationComponent, we will output “Text too short” or “Text long enough” depending on the text length using the conditional rendering. 4. Create another component (=> CharComponent) and style an inline box (=> display: inline-block; padding: 16px; text-align: center; margin: 16px; border: 1px solid black) 5. Render a list of CharComponents where each CharComponent receives a different letter of the entered text (in the inital input field) as a prop 6. When you click a CharComponent, it should be removed from the entered text.

Here are some more articles about lists and conditional rendering: Conditional Rendering: Lists & Keys:

comments powered by Disqus