Styjun

Why are the inside diameters of some pipe larger than the stated size?

Purchased new computer from DELL with pre-installed Ubuntu. Won't boot. Should assume its an error from DELL?

How does the oscilloscope trigger really work?

Why couldn't soldiers sight their own weapons without officers' orders?

Evolution of Pikachu: Pokemon Go

Did silent film actors actually say their lines or did they simply improvise “dialogue” while being filmed?

Should I take out a personal loan to pay off credit card debt?

How does The Fools Guild make its money?

Does this smartphone photo show Mars just below the Sun?

Is there a loss of quality when converting RGB to HEX?

Validation and verification of mathematical models

Is alignment needed after replacing upper control arms?

How to help new students accept function notation

Why does putting a dot after the URL remove login information?

sytemctl status log output

4-dimensional Knight's Tour

Our group keeps dying during the Lost Mine of Phandelver campaign. What are we doing wrong?

Secure my password from unsafe servers

Sparse matrix processing: flip sign of top-left entries of the matrix

Is it double speak?

Is there such thing as a "3-dimensional surface?"

Are certificates without DNS fundamentally flawed?

How can I make Ubuntu run well (including with wifi) on a 32-bit machine?

Is it allowed and safe to carry a passenger / non-pilot in the front seat of a small general aviation airplane?

how to deal with [.map is not a function]

Is there an “exists” function for jQuery?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?var functionName = function() vs function functionName() How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-3

I'm learning React Framework. When i try to fetch from my api using setState .map function dont work. It render "data.map is not a function"

This is the only Method i know:

 constructor(props) 
 super(props);
 this.state = 
 name: "secret",
 email: "secret",
 datas: []
 ;
 

 componentDidMount() 
 const name, password = this.state;

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));
 

render() 
 const datas = this.state;
 const repoItems = datas.map(data => (
 <div key=data.id>
 <p>data.name</p>
 <p>data.email</p>
 </div>

 ));

 return (
 <div>
 datas
 </div>
 );
 

Did I wrote my code wrong or is there any other method beside from this

javascript reactjs redux

share|improve this question

edited Mar 27 at 5:59

code for money

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  are you sure the getData you are getting is an array, can you print it and verify as .map is only for arrays
  
  – warl0ck
  Mar 27 at 5:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show the result what you get.. if you get [] it will work fine with map.. if you getting directly play with your result like this.state.datas.name
  
  – sathish kumar
  Mar 27 at 6:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i think getData is not an array but I'm fetching datas that I indicate as an array so that i can use datas.map()
  
  – code for money
  Mar 27 at 6:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In general, if you get "x.map is not a function" it means that x is not an array. It's pretty straightforward to debug from there on out.
  
  – Chris G
  Mar 27 at 6:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Well if getdata isn't an array then you need to change this.setState( datas: getdata ) into something like this.setState( datas: getdata.datas ) or process the API response some other way. What exactly is returned?
  
  – Chris G
  Mar 27 at 6:05
  

  
  
  
  

 | 
show 1 more comment

-3

I'm learning React Framework. When i try to fetch from my api using setState .map function dont work. It render "data.map is not a function"

This is the only Method i know:

 constructor(props) 
 super(props);
 this.state = 
 name: "secret",
 email: "secret",
 datas: []
 ;
 

 componentDidMount() 
 const name, password = this.state;

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));
 

render() 
 const datas = this.state;
 const repoItems = datas.map(data => (
 <div key=data.id>
 <p>data.name</p>
 <p>data.email</p>
 </div>

 ));

 return (
 <div>
 datas
 </div>
 );
 

Did I wrote my code wrong or is there any other method beside from this

javascript reactjs redux

share|improve this question

edited Mar 27 at 5:59

code for money

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  are you sure the getData you are getting is an array, can you print it and verify as .map is only for arrays
  
  – warl0ck
  Mar 27 at 5:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  show the result what you get.. if you get [] it will work fine with map.. if you getting directly play with your result like this.state.datas.name
  
  – sathish kumar
  Mar 27 at 6:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i think getData is not an array but I'm fetching datas that I indicate as an array so that i can use datas.map()
  
  – code for money
  Mar 27 at 6:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In general, if you get "x.map is not a function" it means that x is not an array. It's pretty straightforward to debug from there on out.
  
  – Chris G
  Mar 27 at 6:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Well if getdata isn't an array then you need to change this.setState( datas: getdata ) into something like this.setState( datas: getdata.datas ) or process the API response some other way. What exactly is returned?
  
  – Chris G
  Mar 27 at 6:05
  

  
  
  
  

 | 
show 1 more comment

I'm learning React Framework. When i try to fetch from my api using setState .map function dont work. It render "data.map is not a function"

This is the only Method i know:

 constructor(props) 
 super(props);
 this.state = 
 name: "secret",
 email: "secret",
 datas: []
 ;
 

 componentDidMount() 
 const name, password = this.state;

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));
 

render() 
 const datas = this.state;
 const repoItems = datas.map(data => (
 <div key=data.id>
 <p>data.name</p>
 <p>data.email</p>
 </div>

 ));

 return (
 <div>
 datas
 </div>
 );
 

Did I wrote my code wrong or is there any other method beside from this

javascript reactjs redux

share|improve this question

edited Mar 27 at 5:59

code for money

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

 constructor(props) 
 super(props);
 this.state = 
 name: "secret",
 email: "secret",
 datas: []
 ;
 

 componentDidMount() 
 const name, password = this.state;

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));
 

render() 
 const datas = this.state;
 const repoItems = datas.map(data => (
 <div key=data.id>
 <p>data.name</p>
 <p>data.email</p>
 </div>

 ));

 return (
 <div>
 datas
 </div>
 );
 

share|improve this question

edited Mar 27 at 5:59

code for money

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

share|improve this question

edited Mar 27 at 5:59

code for money

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

asked Mar 27 at 5:56

code for moneycode for money

9966 bronze badges

1 Answer
1

active

oldest

votes

1

From the top view everything seems fine with your code. map will only run on arrays and I can see that you are setting default state to array as well. However the problem may lies when you attempt to set the state after getting response from fetch call

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));

Here you need to make sure that whatever you are setting data, it should be an array. So in case you are not getting the array in the response set the value which is actually an array and in case the response is empty set an empty array in state instead, something like below

 // may be array is a property of response
 this.setState( datas: getdata.array );
 // may be getdata is empty
 this.setState();

share|improve this answer

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i will try some test if this works because nor of that syntax response an error, but if i do this.setState( [] ) works
  
  – code for money
  Mar 27 at 6:08
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney Again: what is the contents of getData? Do you not realize that simply using getData.array || [] will obviously work because getData.array most likely doesn't exist in the first place?
  
  – Chris G
  Mar 27 at 6:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney as Chris G rightly pointed out you need to know what getData returns and then look for the array which you want to set in state
  
  – Umair Abid
  Mar 27 at 6:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The problem was my credentials. The authentication don't match.
  
  – code for money
  Mar 27 at 7:01
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55370655%2fhow-to-deal-with-map-is-not-a-function%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

From the top view everything seems fine with your code. map will only run on arrays and I can see that you are setting default state to array as well. However the problem may lies when you attempt to set the state after getting response from fetch call

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));

Here you need to make sure that whatever you are setting data, it should be an array. So in case you are not getting the array in the response set the value which is actually an array and in case the response is empty set an empty array in state instead, something like below

 // may be array is a property of response
 this.setState( datas: getdata.array );
 // may be getdata is empty
 this.setState();

share|improve this answer

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i will try some test if this works because nor of that syntax response an error, but if i do this.setState( [] ) works
  
  – code for money
  Mar 27 at 6:08
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney Again: what is the contents of getData? Do you not realize that simply using getData.array || [] will obviously work because getData.array most likely doesn't exist in the first place?
  
  – Chris G
  Mar 27 at 6:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney as Chris G rightly pointed out you need to know what getData returns and then look for the array which you want to set in state
  
  – Umair Abid
  Mar 27 at 6:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The problem was my credentials. The authentication don't match.
  
  – code for money
  Mar 27 at 7:01
  

  
  
  
  

add a comment | 

1

From the top view everything seems fine with your code. map will only run on arrays and I can see that you are setting default state to array as well. However the problem may lies when you attempt to set the state after getting response from fetch call

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));

Here you need to make sure that whatever you are setting data, it should be an array. So in case you are not getting the array in the response set the value which is actually an array and in case the response is empty set an empty array in state instead, something like below

 // may be array is a property of response
 this.setState( datas: getdata.array );
 // may be getdata is empty
 this.setState();

share|improve this answer

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i will try some test if this works because nor of that syntax response an error, but if i do this.setState( [] ) works
  
  – code for money
  Mar 27 at 6:08
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney Again: what is the contents of getData? Do you not realize that simply using getData.array || [] will obviously work because getData.array most likely doesn't exist in the first place?
  
  – Chris G
  Mar 27 at 6:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeformoney as Chris G rightly pointed out you need to know what getData returns and then look for the array which you want to set in state
  
  – Umair Abid
  Mar 27 at 6:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The problem was my credentials. The authentication don't match.
  
  – code for money
  Mar 27 at 7:01
  

  
  
  
  

add a comment | 

From the top view everything seems fine with your code. map will only run on arrays and I can see that you are setting default state to array as well. However the problem may lies when you attempt to set the state after getting response from fetch call

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));

Here you need to make sure that whatever you are setting data, it should be an array. So in case you are not getting the array in the response set the value which is actually an array and in case the response is empty set an empty array in state instead, something like below

 // may be array is a property of response
 this.setState( datas: getdata.array );
 // may be getdata is empty
 this.setState();

share|improve this answer

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

 fetch(
 `http://localhost:3000/api/user/account?username=$username&email=$email`
 )
 .then(res => res.json())
 .then(getdata => 
 this.setState( datas: getdata );
 )
 .catch(err => console.log(err));

 // may be array is a property of response
 this.setState( datas: getdata.array );
 // may be getdata is empty
 this.setState();

share|improve this answer

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges

answered Mar 27 at 6:03

Umair AbidUmair Abid

1,05811 gold badge1616 silver badges3131 bronze badges