can't map array after actually printing the array inside passed data
I am passing data to presentations (stateless) class, the data is passed and I can print the array of prices passed inside it, however when I try to map this array I get an error ('Cannot read property 'map' of undefined')
The codesandbox code here
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{prices.Data.map( (price) =>
<div> something here </div>
)}
)
The index.js just passed the data like this
<div className='column'> <CoinCharts prices={this.state.prices} /> </div>
The data passes ok and prints ok, but doesn't map
reactjs
asked Nov 21 '18 at 17:42
tarek hassan
14011
add a comment |
I am passing data to presentations (stateless) class, the data is passed and I can print the array of prices passed inside it, however when I try to map this array I get an error ('Cannot read property 'map' of undefined')
The codesandbox code here
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{prices.Data.map( (price) =>
<div> something here </div>
)}
)
The index.js just passed the data like this
<div className='column'> <CoinCharts prices={this.state.prices} /> </div>
The data passes ok and prints ok, but doesn't map
reactjs
asked Nov 21 '18 at 17:42
tarek hassan
14011
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
so isprices.Dataan array? Try loggingArray.isArray(prices.Data)
– Velimir Tchatchevsky
Nov 21 '18 at 17:57
add a comment |
I am passing data to presentations (stateless) class, the data is passed and I can print the array of prices passed inside it, however when I try to map this array I get an error ('Cannot read property 'map' of undefined')
The codesandbox code here
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{prices.Data.map( (price) =>
<div> something here </div>
)}
)
The index.js just passed the data like this
<div className='column'> <CoinCharts prices={this.state.prices} /> </div>
The data passes ok and prints ok, but doesn't map
reactjs
asked Nov 21 '18 at 17:42
tarek hassan
14011
I am passing data to presentations (stateless) class, the data is passed and I can print the array of prices passed inside it, however when I try to map this array I get an error ('Cannot read property 'map' of undefined')
The codesandbox code here
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{prices.Data.map( (price) =>
<div> something here </div>
)}
)
The index.js just passed the data like this
<div className='column'> <CoinCharts prices={this.state.prices} /> </div>
The data passes ok and prints ok, but doesn't map
reactjs
reactjs
asked Nov 21 '18 at 17:42
tarek hassan
14011
asked Nov 21 '18 at 17:42
tarek hassan
14011
edited Nov 21 '18 at 17:49
asked Nov 21 '18 at 17:42
tarek hassan
14011
asked Nov 21 '18 at 17:42
tarek hassan
14011
asked Nov 21 '18 at 17:42
tarek hassan
14011
14011
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
so isprices.Dataan array? Try loggingArray.isArray(prices.Data)
– Velimir Tchatchevsky
Nov 21 '18 at 17:57
add a comment |
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
so isprices.Dataan array? Try loggingArray.isArray(prices.Data)
– Velimir Tchatchevsky
Nov 21 '18 at 17:57
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
so is
prices.Data an array? Try logging Array.isArray(prices.Data)– Velimir Tchatchevsky
Nov 21 '18 at 17:57
so is
prices.Data an array? Try logging Array.isArray(prices.Data)– Velimir Tchatchevsky
Nov 21 '18 at 17:57
add a comment |
2 Answers
2
active
oldest
votes
This is happening because at the first render there's nothing in prices.Data. You're grabbing the data with a promise from Axios. So you have to check for the data to actually be there otherwise you'll get this error. You can do that in many ways but one is this:
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{ prices.Data ? prices.Data.map( (price, key) =>
<div key={key} >Something here</div>
) : null }
)
answered Nov 21 '18 at 17:57
weibenfalk
52117
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
add a comment |
I recommend you to change this line:
prices: response.data
to this one
prices: response.data.Data
that should do the job.
answered Nov 21 '18 at 18:02
vitomadio
490110
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417803%2fcant-map-array-after-actually-printing-the-array-inside-passed-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is happening because at the first render there's nothing in prices.Data. You're grabbing the data with a promise from Axios. So you have to check for the data to actually be there otherwise you'll get this error. You can do that in many ways but one is this:
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{ prices.Data ? prices.Data.map( (price, key) =>
<div key={key} >Something here</div>
) : null }
)
answered Nov 21 '18 at 17:57
weibenfalk
52117
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
add a comment |
This is happening because at the first render there's nothing in prices.Data. You're grabbing the data with a promise from Axios. So you have to check for the data to actually be there otherwise you'll get this error. You can do that in many ways but one is this:
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{ prices.Data ? prices.Data.map( (price, key) =>
<div key={key} >Something here</div>
) : null }
)
answered Nov 21 '18 at 17:57
weibenfalk
52117
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
add a comment |
This is happening because at the first render there's nothing in prices.Data. You're grabbing the data with a promise from Axios. So you have to check for the data to actually be there otherwise you'll get this error. You can do that in many ways but one is this:
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{ prices.Data ? prices.Data.map( (price, key) =>
<div key={key} >Something here</div>
) : null }
)
answered Nov 21 '18 at 17:57
weibenfalk
52117
This is happening because at the first render there's nothing in prices.Data. You're grabbing the data with a promise from Axios. So you have to check for the data to actually be there otherwise you'll get this error. You can do that in many ways but one is this:
const CoinCharts = ({prices}) => (
<div className='section'>
// this console.log get an array printed
{console.log( ( prices.Data ) )}
{ prices.Data ? prices.Data.map( (price, key) =>
<div key={key} >Something here</div>
) : null }
)
answered Nov 21 '18 at 17:57
weibenfalk
52117
answered Nov 21 '18 at 17:57
weibenfalk
52117
answered Nov 21 '18 at 17:57
weibenfalk
52117
answered Nov 21 '18 at 17:57
weibenfalk
52117
52117
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
add a comment |
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
Thank you, I didn't notice that delay in receiving data, I can use your method with isLoading too :)
– tarek hassan
Nov 21 '18 at 18:08
add a comment |
I recommend you to change this line:
prices: response.data
to this one
prices: response.data.Data
that should do the job.
answered Nov 21 '18 at 18:02
vitomadio
490110
add a comment |
I recommend you to change this line:
prices: response.data
to this one
prices: response.data.Data
that should do the job.
answered Nov 21 '18 at 18:02
vitomadio
490110
add a comment |
I recommend you to change this line:
prices: response.data
to this one
prices: response.data.Data
that should do the job.
answered Nov 21 '18 at 18:02
vitomadio
490110
I recommend you to change this line:
prices: response.data
to this one
prices: response.data.Data
that should do the job.
answered Nov 21 '18 at 18:02
vitomadio
490110
answered Nov 21 '18 at 18:02
vitomadio
490110
answered Nov 21 '18 at 18:02
vitomadio
490110
answered Nov 21 '18 at 18:02
vitomadio
490110
490110
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417803%2fcant-map-array-after-actually-printing-the-array-inside-passed-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what does the console log print, is it an array, an obj? What does the map function print - nothing at all? Any errors in the console?
– Velimir Tchatchevsky
Nov 21 '18 at 17:45
The error I get is 'Cannot read property 'map' of undefined', the console logs the prices of passed data
– tarek hassan
Nov 21 '18 at 17:51
so is
prices.Dataan array? Try loggingArray.isArray(prices.Data)– Velimir Tchatchevsky
Nov 21 '18 at 17:57