values.map is not a function reactjs

Question

i am fetchin details from database wanted to display that into the table, but for initial purpose i wanted to just display on browser without table and stuff.. am getting values.map is not a function but i could the see values printed in console

here iam using function component

export default function SimpleTable() {
const [values, setValues] = useState({});

here is the fetch function

async function handleTable(){
const res = await fetch("http://localhost:4000/productslist")
const data = await res.json()
setValues(data.data)
console.log(data.data)
}

calling the fetch function on useEffect

useEffect(()=>{
handleTable()
},[])

Rendering the values into browser

return (
<div>

{console.log(values)}
{values.map(v => {
return  <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);
}

here is the error

Uncaught TypeError: values.map is not a function

you're setting values initial value as an `{}` instead set it to `[]` — uday, Jan 06 '20 at 06:51
for your initial `values` is a object . `Array.map` is a valid prototype .so change the initial `values` to array `const [values, setValues] = useState([])` — prasanth, Jan 06 '20 at 06:53

Learner · Accepted Answer · 2020-01-06T07:13:20.610

3

The initial state of your values is an empty object

From

const [values, setValues] = useState({});

Update to

const [values, setValues] = useState([]);

Since Object doesn't have a method called .map

Also in your code since its a async call you can check based on a state whether data has load or not a simple thing you can add is a ternary check

{values.length && values.map(v => {
return  <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);

so once the array has a length greater than zero only it will execute the map function

Working Codesandbox With Sample Example

edited Jan 06 '20 at 07:13

answered Jan 06 '20 at 06:56

Learner

8,379
7
44
82

Can you help me in adding loading state also ? – Logesh P Jan 06 '20 at 07:03
can you recommend any course or links ? regard fullstack reactjs – Logesh P Jan 06 '20 at 08:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205413/discussion-between-dileep-thomas-and-logesh-p). – Learner Jan 06 '20 at 08:37

score 1 · Answer 2 · answered Jan 06 '20 at 06:54

1

Define your state as an array

const [values, setValues] = useState([]);

Code

{values && values.map(v => {
  return  <h4 key={v.idaddproducts}>
           {v.productName}{v.productId}{v.productBrand} 
          </h4>
  })
 }

answered Jan 06 '20 at 06:54

akhtarvahid

9,445
2
26
29

You need to add values.length as the ternary check since empty array is true value – Learner Jan 06 '20 at 06:57
Worked fine.. with the changes you gave.. thanks mate – Logesh P Jan 06 '20 at 07:01

score 0 · Answer 3 · answered Jan 06 '20 at 06:51

0

You set a value {} instead of []. Update

const [values, setValues] = useState({});

to

const [values, setValues] = useState([]);

answered Jan 06 '20 at 06:51

Hardik Chaudhary

1,200
1
8
24

This change alone won't work.. i tried it several times – Logesh P Jan 06 '20 at 07:01
It may because of values should be null or undefined from the api response. – Hardik Chaudhary Jan 06 '20 at 07:04

values.map is not a function reactjs

3 Answers3

Linked