How To Get The First Element Of An Array In React.js

Get the First element of an Array in React.js

If you don’t know to get the first element of an array in React.js, don’t worry. We will give you some simple ways to do it in this article, like using the Array.shift() method or array[0] method. 

Get the first element of an array in React.js

Array is a data type whose value contains many other values. Each value of the array is called an element.

There are 2 ways to declare an array in Javascript:

  • Using array literals – Represented by square brackets followed by the null value or one or more comma-separated values.
  • Using array constructor – Initialized using the ‘new’ keyword.

An attribute that gives the length of the array. If you use a negative integer, an actual number, or a string as the index, the array’s length is also the highest positive integer.

So when we have the length of the array and know that the array is not empty, how do we get the first element of an array?

Use the Array.shift() method

The array shift() method in JavaScipt removes the first element from an array and returns that element.

Syntax:

array.shift();

Parameter: None 

Because the above method returns the single removed value of the array, it also returns the first element of the array. 

Code:

import React, { useState } from "react";

export default function App() {
  const [firstElement, setFirstElement] = useState("Number");
  const newArray = [1, 2, 3, 4, 5];

  return (
    <div>
      <h2>Get the First element of an Array in React.js | LearnShareIT</h2>
      <p>{JSON.stringify(newArray)}</p>
      <p>{firstElement}</p>
      <button onClick={() => setFirstElement(newArray.shift())}>
        Show the First element of this Array
      </button>
    </div>
  );
}

Output:

Because of the available elements of the shift() method, we can delete the first value of the array and get its value, so when the button is pressed, the value is printed on the screen.

Use array[0] method

In this way, we will directly access the first value of the array by passing the array’s index. Specifically, here we will get an index of 0.

Code:

import React, { useState } from "react";

export default function App() {
  const [firstElement, setFirstElement] = useState("Element");
  const newArray = ["First", "Second"];

  return (
    <div>
      <h2>Get the First element of an Array in React.js | LearnShareIT</h2>
      <p>{JSON.stringify(newArray)}</p>
      <p>{firstElement}</p>
      <button onClick={() => setFirstElement(newArray[0])}>
        Show the First element of this Array
      </button>
    </div>
  );
}

Output:

This approach seems simpler and more flexible because as long as we know the index we are looking at, we can get any element of the given array. Hope these methods will be helpful to you.

Summary

To summarize, we have gone through two ways to get the first element of an array in React.js. However, we recommend using the Array [index] method to get and flexibly use the elements. Have a nice day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *