I have an array of objects, where each object has a cryptocurrency-Id. i am using map to render a table and for rendering the token-image in the table i am calling a function: find_corresponding_icon(crypto-name), this function takes the crypto-name as a parameter and returns an image corresponding to it.I am seeing duplicate images rendering in my table.

import {ReactComponent as EthIcon} from '../../assets/eth.svg'
import {ReactComponent as DaiIcon} from '../../assets/dai.svg'
import {ReactComponent as UsdtIcon} from '../../assets/usdt.svg'
useEffect(()=>{
     async function api_call(){
     let res = await getTokenInfo()
     setCurrecnyInfo(res.data.message) //setting state with an array of json objects
                                  //currencyInfo=[{currencyId:1,tokenName:'Ethereum',Amount:312},
                                  //{currencyId : 2, tokenName:'Dai',Amount:182},{currencyId : 3  
                         ,             // tokenName:'USDT',Amount:882}]  
    } 
    api_call();
},[])


function find_corresponding_icon(CurrencyId){
 if(CurrencyId === 1)
    return <EthIcon />
 else if(CurrencyId === 2)
     return <DaiIcon />
 else if(CurrencyId === 3)
      return <UsdtIcon /> 
}
return (

 <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>TokenName</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Amount($)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
  {rows.map((row,id) => (
  <TableRow key={id}>
  <TableCell component="th" scope="row">{find_corresponding_icon(row.currencyId)}</TableCell>
              <TableCell align="right">{row.tokenName}</TableCell>
              <TableCell align="right">{row.Amount}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>


)

The result looks like so:i am very sure all the icons look different, so there should not be a repetition

i am very sure all the icons look different, so there should not be a repetition

0

There are 0 best solutions below