Trying to create an array of object values to be used as options for a dropdown

Question

I am trying to create an array of objects with key, value, text & image fields, to be used as options for a semantic-ui dropdown component as follows:

    const mappedFollowers = followers.map(follower => {
    return {
      key: follower.uid, text: `${follower.firstName} ${follower.lastName}`, value: follower.uid, image: {avatar: true, src:{follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}}
    }
  })

  const mappedFollowing = following.map(follow => {
    return {
      key: follow.uid, text: `${follow.firstName} ${follow.lastName}` value: follow.uid, image: {avatar: true, src:{follow.profileImgUrl ? follow.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}}
    }
  });

Upon compilation, I get the error Parsing error: Unexpected token, expected "," on the line :

const mappedFollowers = followers.map(follower => { 678 | return { 679 | key: follower.uid, text: ${follower.firstName} ${follower.lastName}, value: follower.uid, image: {avatar: true, src:{follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}} | ^ 680 | } 681 | })

I need help on how I can solve this problem or an alternative solution to what I want to achieve

Answer 1

Here you go:

const mappedFollowers = followers.map(follower => {
  return {
    key: follower.uid, text: `${follower.firstName} ${follower.lastName}`, value: follower.uid, image: { avatar: true, src: follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png' }
  }
})

const mappedFollowing = following.map(follow => {
  return {
    key: follow.uid, text: `${follow.firstName} ${follow.lastName}`, value: follow.uid, image: { avatar: true, src: follow.profileImgUrl ? follow.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png' }
  }
});

The problem is that when you're using ternary expression you don't need to wrap that with {}.