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

Question

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. I hope anyone can help me!

Answer 1

As your code is written, you are not rendering one table with a row for each line. You are creating one Lista par record, you have as many tables as pokemon.

What you are looking to achieve is more like :

function PokemonRow(props) {
    return (
       <TableRow key={ props.info.name }>
           <TableCell component="th" scope="row">
              { props.info.name }
           </TableCell>
           <TableCell align="right">{ props.info.url }</TableCell>
       </TableRow>
    )
}

export const PokemonTable() {
    const classes = useStyles();
    
    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 (
        <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>
                            {poke.map(infos => <PokemonRow info={infos}/>)}
                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </div>
    )

}