Material-UI: either `image` or `src` property must be specifiedreactjs giving error Uncaught TypeError: Super expression must either be null or a function, not undefinedHow to specify an anchor for material-ui card title?Insert image into Material-UI AppBarmaterial ui : selectfiled multiple propertyImage on Material UI CardMediaElectron-React-Material UI Color PropertyImage not loading when mapping Material-UI cardsMaterial-ui Override StepLabel nested propertyMaterial-UI property 'children' is 'undefined' for SvgIconMaterial-UI CardMedia image not showing
Why is consensus so controversial in Britain?
Replacing matching entries in one column of a file by another column from a different file
Java Casting: Java 11 throws LambdaConversionException while 1.8 does not
Modeling an IP Address
Convert two switches to a dual stack, and add outlet - possible here?
Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?
Why can't I see bouncing of switch on oscilloscope screen?
Roll the carpet
Do infinite dimensional systems make sense?
If human space travel is limited by the G force vulnerability, is there a way to counter G forces?
Horror movie about a virus at the prom; beginning and end are stylized as a cartoon
Client team has low performances and low technical skills: we always fix their work and now they stop collaborate with us. How to solve?
Does an object always see its latest internal state irrespective of thread?
Malformed Address '10.10.21.08/24', must be X.X.X.X/NN or
I'm flying to France today and my passport expires in less than 2 months
Important Resources for Dark Age Civilizations?
Is it possible to run Internet Explorer on OS X El Capitan?
How does quantile regression compare to logistic regression with the variable split at the quantile?
dbcc cleantable batch size explanation
What defenses are there against being summoned by the Gate spell?
Why doesn't H₄O²⁺ exist?
Theorems that impeded progress
What does "Puller Prush Person" mean?
What would happen to a modern skyscraper if it rains micro blackholes?
Material-UI: either `image` or `src` property must be specified
reactjs giving error Uncaught TypeError: Super expression must either be null or a function, not undefinedHow to specify an anchor for material-ui card title?Insert image into Material-UI AppBarmaterial ui : selectfiled multiple propertyImage on Material UI CardMediaElectron-React-Material UI Color PropertyImage not loading when mapping Material-UI cardsMaterial-ui Override StepLabel nested propertyMaterial-UI property 'children' is 'undefined' for SvgIconMaterial-UI CardMedia image not showing
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
Its looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.
componentDidMount()
// get all items via category ID and owner ID
const restApi = new API( url: 'api' )
restApi.createEntity( name: 'items' )
// api/items/<categoryId>/<ownerId>
restApi.endpoints.items.getTwo( id_a: this.props.categoryId, id_b: this.props.ownerId ).then(( data ) => this.setState( appData: data ))
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
this.state.appData.map(element =>
this.state.images.push(element.imageUrl);
);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution .
Thanks
reactjs material-ui
add a comment |
Its looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.
componentDidMount()
// get all items via category ID and owner ID
const restApi = new API( url: 'api' )
restApi.createEntity( name: 'items' )
// api/items/<categoryId>/<ownerId>
restApi.endpoints.items.getTwo( id_a: this.props.categoryId, id_b: this.props.ownerId ).then(( data ) => this.setState( appData: data ))
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
this.state.appData.map(element =>
this.state.images.push(element.imageUrl);
);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution .
Thanks
reactjs material-ui
add a comment |
Its looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.
componentDidMount()
// get all items via category ID and owner ID
const restApi = new API( url: 'api' )
restApi.createEntity( name: 'items' )
// api/items/<categoryId>/<ownerId>
restApi.endpoints.items.getTwo( id_a: this.props.categoryId, id_b: this.props.ownerId ).then(( data ) => this.setState( appData: data ))
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
this.state.appData.map(element =>
this.state.images.push(element.imageUrl);
);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution .
Thanks
reactjs material-ui
Its looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.
componentDidMount()
// get all items via category ID and owner ID
const restApi = new API( url: 'api' )
restApi.createEntity( name: 'items' )
// api/items/<categoryId>/<ownerId>
restApi.endpoints.items.getTwo( id_a: this.props.categoryId, id_b: this.props.ownerId ).then(( data ) => this.setState( appData: data ))
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
this.state.appData.map(element =>
this.state.images.push(element.imageUrl);
);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution .
Thanks
reactjs material-ui
reactjs material-ui
edited Mar 22 at 14:26
angus
asked Mar 21 at 22:45
angusangus
73562146
73562146
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element =>
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
);
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */
/* Let's not render this part of the component instead of disabled it */
imagesUrl.length > 0 &&
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const classes = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
);
return (<div className="Cards">
this.state.appData.map(data => (
<Card>
<CardHeader avatar=AvatarComponent title=this.props.userName disableTypography=true />
<CardActionArea disabled=data.imageUrl !== ''>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card>
))
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
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%2f55290345%2fmaterial-ui-either-image-or-src-property-must-be-specified%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element =>
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
);
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */
/* Let's not render this part of the component instead of disabled it */
imagesUrl.length > 0 &&
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const classes = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
);
return (<div className="Cards">
this.state.appData.map(data => (
<Card>
<CardHeader avatar=AvatarComponent title=this.props.userName disableTypography=true />
<CardActionArea disabled=data.imageUrl !== ''>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card>
))
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
add a comment |
Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element =>
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
);
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */
/* Let's not render this part of the component instead of disabled it */
imagesUrl.length > 0 &&
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const classes = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
);
return (<div className="Cards">
this.state.appData.map(data => (
<Card>
<CardHeader avatar=AvatarComponent title=this.props.userName disableTypography=true />
<CardActionArea disabled=data.imageUrl !== ''>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card>
))
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
add a comment |
Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element =>
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
);
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */
/* Let's not render this part of the component instead of disabled it */
imagesUrl.length > 0 &&
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const classes = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
);
return (<div className="Cards">
this.state.appData.map(data => (
<Card>
<CardHeader avatar=AvatarComponent title=this.props.userName disableTypography=true />
<CardActionArea disabled=data.imageUrl !== ''>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card>
))
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.
Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render()
const classes = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element =>
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
);
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar=
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() * classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
title=this.props.userName disableTypography=true />
/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */
/* Let's not render this part of the component instead of disabled it */
imagesUrl.length > 0 &&
<CardActionArea disabled=this.state.images.length === 1 ? true : false>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card >
);
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const classes = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className=classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]>
this.props.userName.charAt(0).toLocaleUpperCase()
</Avatar>
);
return (<div className="Cards">
this.state.appData.map(data => (
<Card>
<CardHeader avatar=AvatarComponent title=this.props.userName disableTypography=true />
<CardActionArea disabled=data.imageUrl !== ''>
<CardMedia
id=this.props.ownerId
className=classes.media
image=this.state.images[this.state.imageIndex]
onClick=this.handleOnClick />
</CardActionArea>
</Card>
))
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.
edited Mar 23 at 6:49
answered Mar 22 at 4:05
AlbertSabateAlbertSabate
114
114
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
add a comment |
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
Hello Albert and thank you very much for your answer. Apologized for the lack of information. The appData array contain objects. I created another array only for the imageUrl just to make the code more simple. I suspect that the main problem is that the image is undefined at the first iteration and since the CardMedia is already mount and there is no data I will get this error message.
– angus
Mar 22 at 14:24
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
I added a screenshot so you can see the data in the appData.
– angus
Mar 22 at 14:27
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
reviewing your code, I think you want to render an array of cards with the information you get, I'm going to update your code to clean the error + another suggestion, maybe works better for you.
– AlbertSabate
Mar 23 at 6:37
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
Thank you. I manage to workaround by using "@material/react-card" rather then "@material-ui". Appreciate the help.
– angus
Mar 23 at 15:41
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.
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%2f55290345%2fmaterial-ui-either-image-or-src-property-must-be-specified%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