Render data as a functional component with React.js and Material-UI

  api, javascript, material-ui, reactjs

I have a problem with the management of the data, when i try to render some data from the pokemon api my table render multiple times the titles, i tried to move only the data to a different component but not luck.

How can i fix this?

API CAll

export const PokemonApi = () => {

    const [poke, setPoke] = useState([]);

    const data = () => {        
        
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10&offset=20').then(( response ) => {
    
            setPoke(response.data.results);
            console.log(response.data.results);
    
        })
        .catch( err => {
            console.log(err);
        })

    }

    useEffect(() => {

        data()

    }, []);

    return (

        <>
            {
                poke.map(( info, name ) => {

                    return <Lista key={ name } info={ info } />

                })
            }
        </>
    )
}

component where I try to render

export const Lista = (props) => {

    const classes = useStyles();

    return (
        <div>
            <Container maxWidth="md">
                <TableContainer component={Paper}>
                    <Table className={ classes.table } size="small" aria-label="a dense table">
                        <TableHead>
                            <TableRow>
                                <TableCell>Name</TableCell>
                                <TableCell align="right">URL</TableCell>
                            </TableRow>
                        </TableHead>

                        <TableBody>
                            <TableRow key={ props.info.name }>
                                <TableCell component="th" scope="row">
                                    { props.info.name }
                                </TableCell>
                                <TableCell align="right">{ props.info.url }</TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </div>
    )
}

This is the page where i render the table

import React from 'react'
import { PokemonApi } from '../api/PokemonApi'

export const Pokes = () => {

    return (
        <>
            <PokemonApi />
        </>
    )
}

And here is the table.
Multiple titles
I hope anyone can help me!

Source: Ask Javascript Questions

LEAVE A COMMENT