ReactJs getting component data back with event handler

101 Views Asked by At

I am doing a multi level search with iTunes API.

import React from 'react';
import { Link } from 'react-router-dom';

const ArtistList = ({artists}) => {

if(artists === undefined) {
  return(
    <div className='conatiner'>
      <div className='notification'>
        <a className='has-text-link' href="#album"> </a> 
      </div>
    </div>
  )  
}

const fetchAlbums = (event) => {
  console.log(event.target)
}

return (
  <div className='conatiner'>
    {artists.map((artist, index) => 
      <h2 key={index} className="subtitle">
        <Link key={artist.artistId} id={artist.artistId} className='has-text-dark' to="albums" onClick={fetchAlbums}>{artist.name}</Link>
      </h2>
     )}
    </div>
  )
}

export default ArtistList;

So I'd like to access the data that I am using to render this to make another fetch based on which item I'm clicking on.

How should i approach it? If i pass event.target the only thing i got is from className, and it's not enough. Oh and btw id is not present in the element inspector and i don't know why.

0

There are 0 best solutions below