How to render the lists in ReactJs

Manpreet Singh — Sun, 14 May 2023 05:48:44 +0000

Rendering lists of data is one of the most common tasks in web development. In ReactJS, rendering lists can be done using various approaches. In this blog post, we will explore how to render lists in ReactJS.

Method 1: Using for loop

const fruits = ["Apple", "Banana", "Orange"];

const fruitList = [];

for (let i = 0; i < fruits.length; i++) {
  fruitList.push(<li>{fruits[i]}</li>);
}

return <ul>{fruitList}</ul>;

Method 2: Using Map

Another way to render lists in ReactJS is by using the map method. In this method, we create an array of elements using the map method and then render them on the page.

const fruits = ["Apple", "Banana", "Orange"];

return (
  <ul>
    {fruits.map((fruit) => (
      <li>{fruit}</li>
    ))}
  </ul>
);

Method 3: Using Array.prototype.reduce()

The reduce method is a powerful tool that can be used to render lists in ReactJS. In this method, we create an array of elements using the reduce method and then render them on the page.

const fruits = ["Apple", "Banana", "Orange"];

return (
  <ul>
    {fruits.reduce((accumulator, fruit) => (
      accumulator.push(<li>{fruit}</li>), accumulator
    ), [])}
  </ul>
);

In this blog post, we have explored the different ways to render lists in ReactJS. Although there are several approaches to achieving this, using a map is the most common and recommended way. Using a map not only simplifies the code but also improves its readability. It is essential to choose the right approach depending on the requirements of your project.

What is react?

Manpreet Singh — Fri, 10 Jun 2022 12:30:42 +0000

Simplest meaning
A JavaScript library for building user interfaces

React is a javascript library which is used for building user interfaces. 😎
It contains three important things

Declarative
Component-Based
Learn Once, Write Anywhere

1. Declarative

React makes it painless to create interactive UIs.

For example: If we want to add a tag to the other tag so we have to write code like this in javascript

first, get the id or class name of another tag
then put the tag in it with the help of innerHTML

but in react we don't need this kind of stuff

Just create a function like a javascript function
And return the tag that's it.
And everything is maintained by the react.

Now you have created the component.
what is a component? we will talk about it in the component section

2. Component-Based

Component means dividing the big UI code into the small UI block of code

For example

let's say we have a home page where have put all the code in it like buttons, navbar, sidebar, body and so on right.
Suppose we created a new page like about us where we want to add a button.
So what we do is just copy the button code from the home page and past it on the about us page
But there is a problem if we change the colour of the button so we have to change the button colour on every page

So this problem is resolved by COMPONENT

Let's take the previous example, how does the component help us to solve this problem?
First, it creates a separate file like button.js (Component) for the button code Ok
Then it just links the button.js file with a home page and about us page

So if any changes occur in the button so we just need to change the button file and then all the files which import it. their button will change

3. Learn Once, Write Anywhere

this one means reusability

Right, Now code is more reusable
we can take the button example create a new button component and put the button code into it.
And use this component in every file where we want to add button code this is reusable

DEV Community: Manpreet Singh