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:

App.js

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 = itemList.map((item, index) => 
                               <div key={index}>{item}</div>
                             );
  return (
    <div className="app">
      <div>The List contains:</div>
      {renderList}
    </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.

All the best 👍