I'm still a bit of a newbie in web dev and I've hit on a stumbling block. I'm currently working on a project that fetches API images and I want to attach links to it in my code but it would multiply the number of arrays and this is the problem.

Here is a snapshot of it-

import React, { useState, useEffect } from 'react';
import '../App.css';
import axios from 'axios';
import  sites  from './Constants';

const Leagues = () => {
  const [data, setData] = useState([]);

  useEffect(()=> {
    axios('https://api-football-standings.azharimm.site/leagues')

    .then(res => {
      console.log(res.data.data);
      setData(res.data.data);
    })
  }, [])

  return <div className='leagues-container'>
    {data.map((data)=> (
      sites.map(({ source })=> (
          <div key={data.id}>
            <a href={source} target='_blank' rel='noreferrer' className='leagues-div'>
              <img src={data.logos.light} />
            </a>
            <h1>{data.name}</h1>
          </div>
        ))))}
    </div>;
};
  

export default Leagues;

I've also created a constants component which has an array of the links that should be appropriate to each image.

Constants-

const sites = [
  {
    id: 0,
    title: 'Argentinian League',
    source: 'https://www.afa.com.ar/es/'
  },
  { 
    id: 1,
    title: 'Australian League',
    source: 'https://www.ultimatealeague.com/'
  },
  {    
    id: 2,
    title: 'Brazilian League',
    source: 'https://www.espn.com.au/football/league/_/name/bra.1'
  },
  {    
    id: 3,
    title: 'Chinese League',
    source: 'https://www.thecfa.cn/Eindex/index.html'
  },
  {  
    id: 4,
    title: 'Dutch League',
    source: 'https://eredivisie.eu/home/'
  },
  {    
    id: 5,
    title: 'English League',
    source: 'https://www.premierleague.com/'
  },
  {    
    id: 6,
    title: 'French League',
    source: 'https://www.ligue1.com/'
  },
  {    
    id: 7,
    title: 'German League',
    source: 'https://www.bundesliga.com/en/bundesliga'
  },
  {    
    id: 8,
    title: 'Indonesian League',
    source: 'https://www.espn.com.au/football/league/_/name/idn.1'
  },
  {    
    id: 9,
    title: 'Italian League',
    source: 'https://www.legaseriea.it/en'
  },
  {
    id: 10,
    title: 'Japanese League',
    source: 'https://www.jleague.co/'
  },
  {
    id: 11,
    title: 'Malaysian League',
    source: 'https://www.malaysianfootballleague.com/'
  },
  {
    id: 12,
    title: 'Mexican League',
    source: 'https://www.espn.com.au/football/schedule/_/league/mex.1'
  },
  {
    id: 13,
    title: 'Portuguese League',
    source: 'https://www.ligaportugal.pt/en/homepage/'
  },
  {
    id: 14,
    title: 'Russian League',
    source: 'https://eng.premierliga.ru/'
  },
  {
    id: 15,
    title: 'Singaporean League',
    source: 'https://www.spl.sg/'
  },
  {
    id: 16,
    title: 'Spanish League',
    source: 'https://www.laliga.com/en-GB'
  },
  {
    id: 17,
    title: 'Thai League',
    source: 'https://www.thaileague.co.th/131'
  },
  {
    id: 18,
    title: 'Turkish League',
    source: 'https://www.tff.org/Default.aspx?pageID=449'
  },
  {
    id: 19,
    title: 'Ugandan League',
    source: 'https://fufa.co.ug/uganda-premier-league/'
  },

]

export default sites

There are 20 items on the array on the API and there are 20 links that I created on the constants component that would link to the corresponding items. I have attached a snapshot of the problem below. On that image I was hovering on the second image that would correspond to the second link on the constant component. The link is correct but the image isn't. As can be seen by the scroll bar, I mistakenly managed to multiply the images by that of the links. Any recommendation is welcomed!

photo of multiplied images

CodePudding user response：

You are doing the map twice which means for each element that is looping on the outer loop there is another internal loop. This is why data is duplicated.

 const findSource =(index) => {
    const site = sites.find((el) => el.id === index)
    return site.source;
  }

  return (
    <div className='leagues-container'>
    {data.map((data,index)=> (
          <div key={data.id}>
            <a href={findSource(index)} target='_blank' rel='noreferrer' className='leagues-div'>
              <img src={data.logos.light} alt={data.name} />
            </a>
            <h1>{data.name}</h1>
          </div>
       ))}
    </div>
  );

Here I created a function for finding the link from the sites list. According to the way you have defined the sites array, this will only work properly if your API response and the sites array is in the same order. So I recommend to have a common ID for both the sites array and API response. For example you can have id: "arg.1" and so on.

sandbox demo