function map in react

Question

i'm a newbie in react and i have the following problem: i'm trying to get the objects from a get (axios) and play on the screen using the map, but i'm doing it wrong, if anyone can help me i would be grateful.

the requisition brought me the following items:

0: {username: "eqwe", name: "weqeqw", email: "eqwwqe", city: "qweewq", id: "fxm8j"}

1: {username: "sadsa", name: "asdads", email: "asdas", city: "sddsadsa", id: "79ywn"}

2: {username: "aaa", name: "aaa", email: "aaaa", city: "aaaaa", id: "8shpw"}

3: {username: "ddd", name: "ddd", email: "dddd", city: "ddd", id: "aourz"}

4: {username: "teste", name: "teste", email: "teste", address: {…}, city: "teste", …} ...

this is my code:

import {getUsers} from '../actions';


function Table(){

const [data, setData] = useState({data: []});

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, []);
return(
     {data.map((item) => 
     <div key={item.id}>{item.name}</div>)}
)

Can you please explain if you have any error message or where do you see any issues? What is the structure for result variable on the console? — norbitrial
– norbitrial, Commented Jan 18, 2020 at 16:04

Samet Karaca · Accepted Answer · 2020-01-18 16:04:12Z

1

You don't need to make nested object in state.

import {getUsers} from '../actions';
function Table(){

const [data, setData] = useState([]);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, []);
return(
     {data.map((item) => 
     <div key={item.id}>{item.name}</div>)}
)

answered Jan 18, 2020 at 16:04

Samet Karaca

1036 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sulthan · Accepted Answer · 2020-01-18 16:03:43Z

0

Just drop the { ... }:

return data.map(item => (
   <div key={item.id}>{item.name}</div>
));

{ } inside a component are used to insert the result of an expression. However, you are not inside an element (not inside <tag> ... </tag>) therefore { } will just denote a block of code.

answered Jan 18, 2020 at 16:03

Sulthan

130k23 gold badges223 silver badges277 bronze badges

Collectives™ on Stack Overflow

function map in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related