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;








1















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 .



enter image description here



Thanks










share|improve this question






























    1















    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 .



    enter image description here



    Thanks










    share|improve this question


























      1












      1








      1








      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 .



      enter image description here



      Thanks










      share|improve this question
















      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 .



      enter image description here



      Thanks







      reactjs material-ui






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 22 at 14:26







      angus

















      asked Mar 21 at 22:45









      angusangus

      73562146




      73562146






















          1 Answer
          1






          active

          oldest

          votes


















          0














          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.






          share|improve this answer

























          • 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











          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


















          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









          0














          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.






          share|improve this answer

























          • 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















          0














          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.






          share|improve this answer

























          • 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













          0












          0








          0







          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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

















          • 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



















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

          SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

          은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현