Warning: session_start(): open(/tmp/sess_069817cc59b7b76b2a9c5d01ff41fc6a, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to get the key index of an element on click in React - LearnShareIT

How to get the key index of an element on click in React

Get the key index of an Element on click in React

When we deal with a list of elements, we will usually have to get the key index of an element on click in React to know which element we clicked on. Some of the ways that will be covered in the article can be mentioned as e.target.getAttribute() method or get the index from the function’s parameter.

Get the key index of an element on click in React

React uses keys to figure out what has changed, been added, or gone away. To give the elements of the array a stable definition, keys should be assigned to them.

Code:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

An array’s keys must be unique among its relations. They need not, however, be distinctive on a global scale. When making two distinct arrays, we can make use of the same key.

Using e.target.getAttribute() method

Because the Element’s getAttribute() method returns the value of a particular attribute. The return value will be either null or “” (an empty string) if the given attribute is not present. For more information, see Property doesn’t exist. Therefore, we can use it to gain access to the element’s key when that element’s button is pressed.

Code:

import React, { useState } from 'react';
 
const App = () => {
  const [key, setKey] = useState("none");
  const handler = function(e){
   setKey(e.target.getAttribute("data-index"));
  };
  const items=[{
    id:1,
    text: "Hello World"
  },
 {id:2, text: "Welcome to LearnShareIT"}  
];
  var listItems = items.map(function(item, index){
    return (
      <button key={index} data-index={index} onClick={ handler } >
        {item.text}
      </button>
    )
  });
  return (
 
    <>
    <h2>Get the key index of an Element on click in React</h2>
    <h3>{key}</h3>
      <div>
        {listItems}
      </div>
    </>
  )
}
 
export default App;

Output:

In this way we will use the get attribute method to get the attribute corresponding to the element’s index, specifically here we will set it as data-index to store this value. When we press any button, the program will render the corresponding index screen of that element.

Get the index from the function’s parameter

This will be a more concise way as we will get the index value directly from the map() property to be able to get the index value of the button we select and that is also the key index of the element. Take a look at the code below to learn more about how to do this.

Code:

import React, { useState } from 'react';
 
const App = () => {
  const [key, setKey] = useState("none");
  const items=[{
    id:1,
    text: "Hello World"
  },
 {id:2, text: "Welcome to LearnShareIT"}  
];
const handler = index => () => {
 setKey(index);
}
 
 
  var listItems = items.map(function(item, index){
    return (
      <button key={index} onClick={ handler(index) } >
        {item.text}
      </button>
    )
  });
  return (
 
    <>
    <h2>Get the key index of an Element on click in React</h2>
    <h3>{key}</h3>
      <div>
        {listItems}
      </div>
    </>
  )
}
 
export default App;

In this way, we will use the way of passing an index value through an anonymous function. When we press the button, the anonymous function above is called and the state key index is reset to the value of the index and rendered to the screen. So we can get the key index of an element on click in React in several ways, good luck with these methods.

Summary

To summarize, this article has shown you how to get the key index of an element on click in React, but we should set a data index for the element like the first one.

Maybe you are interested:

Leave a Reply

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