How To Use Array In React JS

Websolutionstuff | Aug-12-2022 | Categories : React JS

In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functions in React JS. We can see react loop array example in the render. Also, we are using the map() method. map() creates a new array from calling a function for every array element. map() calls a function once for each element in an array. map() does not execute the function for empty elements.

So, let's see how to access array elements in React JS or how to render an array of components React JS.

Iterate String Array:

we will see how to loop through the Array and display it in the UI.

Create a new String Array using the below code in your index.html file.

const myArray = ['Laravel', 'PHP', 'Node JS', 'React JS', 'jQuery'];

The Array contains the list of items. We can iterate and display the Array in the UI using map() function.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>

        <div id="mydiv"></div>

        <script type="text/babel">      

          function Hello() {  
         
          const myArray = ['Laravel', 'PHP', 'Node JS', 'React JS', 'jQuery'];  
            
          return (  
            <div className="container">     
                <h1> How To Use Array In React JS - Websolutionstuff</h1>  
             
                {myArray.map(name => (  
                  <li>  
                    {name}  
                  </li>  
                ))}  
             
            </div>  
          );  
        }
          
        ReactDOM.render(<Hello />, document.getElementById('mydiv'))

        </script>
    </body>
</html>

Output:

array_map_example_react_js

 

 

Iterate Array Of Objects:

how to loop through the array of objects. It is similar to the String Array example.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>

        <div id="mydiv"></div>

        <script type="text/babel">      

        function Hello() {  

            const tdstyle = {  
              border:"1px solid black",
              padding:"15px",
            };
       
            const myArray =  [  
                {  
                    'id': 1,   
                    'name': 'Laravel',
                    'website': 'https://laravel.com/'
                },  
                {  
                    'id': 2,   
                    'name': 'React JS',   
                    'website': 'https://reactjs.org/'
                },  
                {  
                    'id': 3,   
                    'name': 'jQuery',
                    'website': 'https://jquery.com/'
                },  
            ];  
            
            return (  
            <div className="container">     
                <h1> How To Use Array In React JS </h1>  
             
                <table style={{borderCollapse:"collapse"}}>  
                    <tr>  
                        <th>ID</th>  
                        <th>Name</th>  
                        <th>Website</th>  
                    </tr>  
            
                    {myArray.map((myArray, index) => (  
                      <tr data-index={index}>  
                        <td style={tdstyle}>{myArray.id}</td>  
                        <td style={tdstyle}>{myArray.name}</td>  
                        <td style={tdstyle}>{myArray.website}</td>  
                      </tr>  
                    ))}  
            
                </table>   
             
            </div>  
          );  
        }
          
        ReactDOM.render(<Hello />, document.getElementById('mydiv'))

        </script>
    </body>
</html>

Output:

array_of_objects_example_react_js

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Form Collective Example
Laravel 9 Form Collective Exam...

In this article, we will see laravel 9 form collective example. Here, we will learn how to use collective form and...

Read More

Jan-20-2023

Laravel 9 Import Export CSV/EXCEL File Example
Laravel 9 Import Export CSV/EX...

In this tutorial, I will give you laravel 9 import export csv and excel file example. We will simply create import...

Read More

Feb-19-2022

How To Check Array Is Empty Or Null In Javascript
How To Check Array Is Empty Or...

In this example, I will show you how to check if an array is empty or null in javascript or jquery. When we are wor...

Read More

Aug-18-2020

How to Image Upload Laravel 11 Vue 3 Example
How to Image Upload Laravel 11...

Hello, laravel web developer! In this article, we'll see how to image upload in laravel 11 vue 3. Here, we'...

Read More

May-27-2024