ternary operator not working in map function react

Question

I am mapping through an array of objects, some of the images are broken so I created a function to check the image which returns true or false and if false then use a placeholder image.

However I am getting an error and I think its because I am using a ternary operator inside the map function. Any ideas?

Function:

public renderProfile() {

// Grabs the array of objects
const profiles = this.state.profiles; 

// Renders the selected profile
const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => (

  this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : profile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

  <div key={shortid.generate()} className={styles.linkedInContainer}> 
    <DocumentCard
      aria-label={profile.postContent}
      onClickHref={profile.postUrl}
    > { profile.imgUrl && 
        <img className={styles.linkedInHeroImage } src={ profile.imgUrl } />
      }
      <DocumentCardTitle
        title={profile.postContent}
        shouldTruncate={true}
      />
      <DocumentCardActivity
        activity={`Likes: ${profile.likeCount}`}
        people={[{ name: 'Read more on linkedIn', profileImageSrc: profile.imgUrl ? profile.imgUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAA' }]}
      />
    </DocumentCard>
  </div>

));
return renderProfiles;
}

This is braking it:

this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : profile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

[15:43:22] Error - [tsc] src/webparts/linkedIn/components/LinkedIn.tsx(143,157): error TS1005: ')' expected. [15:43:22] Error - [tsc] src/webparts/linkedIn/components/LinkedIn.tsx(163,5): error TS1128: Declaration or statement expected. [15:43:22] Error - [tsc] src/webparts/linkedIn/components/LinkedIn.tsx(163,6): error TS1128: Declaration or statement expected.

Check image function:

  // Checks linkedIn images for broken ones
  private checkImageUrl(url) {
    var lastPart = url.substr(url.lastIndexOf('=') + 1);
    if (lastPart === "image") {
       return true;
    } else {
      return false;
    }
  }

https://codepen.io/bkdigital/pen/poojmbo?editors=1011 - This proves the check url function is working

Can you please update the post with the definition of checkImageUrl — Joelgullander
– Joelgullander, Commented Oct 11, 2019 at 14:41
The result of the ternary isn't being assigned to anything. What's it supposed to do? — RemcoGerlich
– RemcoGerlich, Commented Oct 11, 2019 at 14:46
Consider checking if url exists in your checkImageUrl function above the string manipulation otherwise you will get nullexception if passed in null — Joelgullander
– Joelgullander, Commented Oct 11, 2019 at 14:48
The ternary is checking if these is a valid image url, if not, it gives it a fall back image. (Its updated now) — BennKingy
– BennKingy, Commented Oct 11, 2019 at 14:58

Jackyef · Accepted Answer · 2019-10-11 14:44:09Z

2

On this line,

const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => (

You start the function passed to .map() with a (. JavaScript will interpret anything that comes after it as the return value of the function. Since your function has another statement inside of it, this will cause an error.

You should change it as follow:

const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => {
  this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : selectedProfile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

  return (
    <div key={shortid.generate()} className={styles.linkedInContainer}> 
      <DocumentCard
        aria-label={profile.postContent}
        onClickHref={profile.postUrl}
      > { profile.imgUrl && 
        <img className={styles.linkedInHeroImage } src={ profile.imgUrl } />
      }
      <DocumentCardTitle
        title={profile.postContent}
        shouldTruncate={true}
      />
      <DocumentCardActivity
        activity={`Likes: ${profile.likeCount}`}
        people={[{ name: 'Read more on linkedIn', profileImageSrc: profile.imgUrl ? profile.imgUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAA' }]}
      />
    </DocumentCard>
  </div>
  );
});

answered Oct 11, 2019 at 14:44

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RemcoGerlich Over a year ago

The ternary still looks nonsensical like this, its value isn't being assigned to anything.

Jackyef Over a year ago

I know, but it wasn't the question so I refrain from commenting on that part.

BennKingy Over a year ago

this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : profile.imgUrl = 'via.placeholder.com/300x167.png?text=LINKEDIN'; -- Sorry it should of been like this

Collectives™ on Stack Overflow

ternary operator not working in map function react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related