Retrieve data from array.map via onClick in react

Question

So i have an array.map of buttons that cycles through an array of api data. When i click this button, I want to take that specific buttons data, and store it in local storage. I am at a loss on how to do this via the googles. Any ideas?

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

So in the storeUrl function, I want to take the data from the link that was clicked and store it. As an example, lets say there are 5 items in the array that are being looped through. each one has a different URL. I want the URL that i click on.

you can do like this this.storeUrl(url). Just pass the URLs to your this.storeUrl function. — ksa
– ksa, Commented Sep 13, 2020 at 4:51
onClick={(url)=>this.storeUrl(url)} , once u do this, within the storeUrl function u can store the url in localStorage. — Aditya Patnaik
– Aditya Patnaik, Commented Sep 13, 2020 at 5:01
KSA is the closest. What worked for me was onClick={}, and adding a fat arrow function inside to pass the header.url to the function like : onClick={() => this.storeUrl(header.url)} — Josh Winters
– Josh Winters, Commented Sep 13, 2020 at 5:15

Spidy · Accepted Answer · 2020-09-13 04:51:15Z

The easiest solution (though not the most performant) is assigning a wrapped function to the event listener.

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={() => this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

You can see I created a fat arrow function that invoked storeUrl with header as the parameter. This creates a new function for every Link on every render. Not optimal but it'll do the trick. Another way to write this is as a function that returns a function:

function storeUrl(header) {
  return function(e) {
    // This is the function that's called on click, it has access
    // to header via lexical scope
  }
}

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl(header)}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

The final option is to attach some data to the button that can be retrieved through the click event.

{this.state.sb_headers.map((header, index) => (
    <Link key={index} to={header.title} className="list-group-item list-group-item-action" aria- 
    current="true" onClick={this.storeUrl} data-index={index}>
        <span className='icon-text'>{header.title}</span>
    </Link>
))}

// Your storeUrl method will receive e as an event
function storeUrl(e) {
  // Get more information about the click
  // The value will be a string so the + transforms it back to a number
  let index = +e.target.getAttribute('data-index');
  let header = this.state.sb_headers[index];

  // Whatever you were going to do with header
}

This solution is more performant as it doesn't create a bunch of extra wrapped functions, though the performance is can be negligible depending on the application size.

Brandon Tiqui · Accepted Answer · 2020-09-13 04:56:43Z

1

Let's assume that each header item that you are mapping over has a property named "url".

Your onClick for the Link component would call the storeUrl method with the url parameter:

onClick={this.storeUrl(header.url)}

Then, your storeUrl method would look like this:

storeUrl(url) {
  return function() {
    // do something with url
  }
}

This is a closure and the returned function won't be invoked until the link is clicked.

edited Sep 13, 2020 at 4:56

answered Sep 13, 2020 at 4:50

Brandon Tiqui

1,4393 gold badges19 silver badges37 bronze badges

2 Comments

Josh Winters Over a year ago

This does not work, as it calls the function immediately on load in react if you use onClick={functionexample()}, in react, for the on click to work it needs the () to not be there.

Brandon Tiqui Over a year ago

On load storeUrl returns a function. When a link is clicked then that function gets invoked. Try it and throw a console.log inside the returned function to test it out.

Collectives™ on Stack Overflow

Retrieve data from array.map via onClick in react

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related