0

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

3
  • Have you made sure your currencyId is a 1,2,3 seperate and not same in response? Commented Nov 7, 2022 at 18:03
  • yes chetan i am very sure that is not the case. Commented Nov 8, 2022 at 14:54
  • can you provide codesandbox for the same? Commented Nov 8, 2022 at 20:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.