React is a great library for building elements of user interface. It is founded on the concept of reusable components. Essentially, developers break down the application into small components, and then use them to build an entire application like you’d bring a house using bricks. Fortunately, there are guides on how to efficiently manage web applications built in React.
In React, we use HTML-like language called JSX, which looks like HTML, but is actually JavaScript. Essentially, you create components, and then import them in a parent component to invoke them like you would add an HTML element.
Render multiple components in JSX
In this article we will deal with the situation when you want to render the same component X number of times. React developers often use map() and other array methods to render elements based on items in the array. Sometimes you don’t have an array, and you don’t want to render different components, but the same component. In this case, you have to find some other way.
Technically, we can still use map() to render the same component multiple times, but we don’t always receive array where every item is the same. So we need to create one. We can use Array interface and its fill() method to create an array, specify the number of items in the array, and what that item should be. Essentially, we can create an array with any number of items.
Array() function creates an array. Its argument specifies the number of items in the array. Then we use fill() to specify item value. In our case, we need to fill an array with a specific JSX element, and then render that array inside JSX.
Outside JSX
Alternatively, you can do all this outside JSX, and store array in a variable. Then reference that variable inside JSX, and use map() method to return elements for every item in the array. Don’t forget to use curly braces as well. You need them to include JavaScript expressions in React.
When using map() or filter(), don’t forget that every element should have a unique id value. You can simply set a key attribute to array item’s index. In case you didn’t know, map() allows you to provide second argument that tracks index of the array item. Then you can set key attribute to that value.
For loop
Finally, let’s explore how to render multiple component using a for loop. This is a traditional way to create a sorted array. First, we need to create an array outside of the for loop. Then you need to create a for loop with the following parameters:
Start from index 0, continue to run the loop until you reach a specific index, and then increase the index by 1. If you wanted to add the same React element 10 times, you need to run the for loop until you reach index 9. You need to do this because JavaScript starts counting index from 0.
In the body, you should use a simple push() method on the empty array to add a React element for every iteration. By the time the loop is finished running, you will have an array with a certain number of React elements.
Conclusion
In this article, we discussed how to render the same component (or element) multiple times in React. If you didn’t find answers here, you should explore this excellent guide on SimpleFrontEnd.
Top comments (0)