How To Use React Array ?

React Array works as normal array in many programming languages, Basically array is a collection of data which stored in continues memory location, React array useful element to learn in order to make optimized and good application in react.

React Array Basic Rendering

React array has simple syntax as normal array, but if we want to access array elements or value we need to use curly bracket.

Syntax

const Var= [1,2,3,4];

Since react array is same as normal array, it also has common syntax like normal one. You need to store the array elements within square bracket [].

Example

import React from 'react';

const v = ['react','JavaScript','Angular']
function App(){
	return(
		<>
			<h1>{v[0]}</h1>
			<h2>{v[2]}</h2>
			<h3>v[1]</h3>
		</>
	);
}
export default App;

In the above example, we have added an array named v with ‘react’,’JavaScript’,’Angular’ values, the array start from index 0, so first element’s index will 0, second have index 1 and third have index number 2. As we can see, we have accessed the array value using curly braces {} and as <h3> we tried to access the value of array without {} curly brackets.

Output

As you can see for both h1 and h2 element, we got our expected answer. But in the third element we are not able to fetch the value of index 2, this means we required to use curly bracket to access the array.

Object Values in React Array

We can also pass object as a value in react array, and also we can access them using curly brackets.

Example

import React from 'react';

const Data =[
    {
        name: 'Alex',
        email: 'alex123@gmail.com'
    },

    {
        name : 'lucy',
        email: 'lucy92@gmail.com'
    }
]
function App(){
	return(
		<>
			<h1>{Data[0].name}</h1>
			<p>{Data[1].email}</p>
		</>
		
	);
}
export default App;

We have declared here Data array, in this we have 2 object elements, and if we want to access them we will again use curly brackets which have arrayname[index number].property syntax.

Output

Rendering Array With Iteration

Iteration based array methods are simply those methods which renders every value in an array based on condition and iteration provided to the array.

Array.map() method

array.map() method is a JavaScript method, and it is an iteration method which simply means map() method renders every element present in the array, It is used to iterate over the parent array.

Syntax

array.map(function(currentValue, index, arr), thisValue)

Parameters This method accepts two parameters as described below and mentioned above:

• Function (currentValue, index, arr): It is a required parameter and runs on every element of an array. It has three parameters. They are listed below.
  • currentValue This parameter is required and holds the current element’s value.
  • index this parameter is optional and holds the index for the current element.
  • Arr, This parameter, is optional and holds the array.
• thisValue It’s an optional parameter that holds the value of the function passed.

Return value: It returns an array, and elements of arrays are the results of a callback function.

Example

import React from 'react';

const Data =[
    {
        name: 'Alex',
        email: 'alex123@gmail.com'
    },

    {
        name : 'lucy',
        email: 'lucy92@gmail.com'
    }
]
function App(){
	const listdata = Data.map((element)=>{
			return(
				<>
					<h1>{element.name}</h1>
					<h2>{element.email}</h2>
				</>
			)
		}
	)
	return(
		<div>
			{listdata}
		</div>
	)
}
export default App;

Output

Array.filter() method

React’s filtering is exactly what it says; this is the act of looping through an array and including or excluding elements from that array, depending on the condition you provide.

However, we are not filtering with React. A filter is a JavaScript function we can use on an array object. React is written in JavaScript. These methods are not unique to React. React is just a UI library.

Example

import React from 'react';

const names = ['James', 'John', 'Paul', 'Ringo', 'George'];

function App() {
  return (
    <div>
      {names.filter(name => name.includes('J')).map(filteredName => (
        <h1>
          {filteredName}
        </h1>
      ))}
    </div>
  );
}

export default App;

Output