How to render an array of strings in react?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to render an array of strings in react with code example.

In this article, you will learn how to display every item from the list/array on-screen in React JS.

To demonstrate the above steps we will consider an example to render an array of string values in React JS. The output for this example is shown below where every string value of the list is printed in ascending order.

Let’s look at the following example to understand how it basically works:


import React from "react";

import "./App.css";

const App = () => {
  const itemList = ["List1", "List2", "List3", "List4", "List5"];

  // Generate JSX code for Display each item
  const renderList =, index) => 
                               <div key={index}>{item}</div>
  return (
    <div className="app">
      <div>The List contains:</div>

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

React, Click

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts