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()
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: https://reactjs.org/docs/conditional-rendering.html Lists & Keys: https://reactjs.org/docs/lists-and-keys.htmlcomments powered by Disqus