Trying to use Javascript in Semantic-ui

Hi guys. I am a fairly newbie front-end developer. I am trying to do something like
if(overallRating === 'No reviews yet){
show in webpage (No reviews yet)
}
else show in webpage(overallRating + but the icon part renders as [Object object] in the webpage. Pleaase let me know what im doing wrong.

here’s my code

import React from 'react'
import { Card, Icon, Image } from 'semantic-ui-react'


function ProductCard({product:{id, name,isVisible,overallRating,sellerID, description}}){
   if(!overallRating){
    overallRating = 'No ratings yet' 
    
   }
   console.log('im here') 
   return(<Card>
    <Image src='https://react.semantic-ui.com/images/avatar/large/matthew.png' wrapped ui={false} />
    <Card.Content>
      <Card.Header>{name}</Card.Header>
      
      <Card.Description>
        {description}
      </Card.Description>
    </Card.Content>
    <Card.Content extra>
      <a>
       
        {overallRating + (({overallRating} === 'No ratings yet') ? (".") : (<Icon name = 'star'></Icon>)) }
       </a>
    </Card.Content>
  </Card>)
}

export default ProductCard

Hi and welcome to the forums.

Your way of accessing arguments you passed to your function is wrong.

Review object notation in javascript.
You can also review react lessons, problem similar to yours is covered there.

It’s a little hard to know without some live example, but you might be “stringifying” the Icon component here (the +).

{overallRating + (({overallRating} === 'No ratings yet') ? (".") : (<Icon name = 'star'></Icon>)) }

Not sure I really understand why you are doing it this way. What exactly is it you want the first part of the ternary to return?

1 Like

I am trying to print overallRating + star icon if the overall rating != ‘No ratings yet’, i.e., if overallRating has a value, print overallRating and a star icon.
else print overallRating and a period(which is ‘No ratings yet’ + ‘.’)

I know im doing something really silly here. Please help me by pointing it out.

thank you. I will do that too. :smile:

For some reason, I’m struggling with this right now, or it’s just React that’s annoying (or likely both). I’m sure there is a better way.

import React from "react";
import { Icon } from "semantic-ui-react";

export default function App() {
  let overallRating = "No ratings yet";
  // overallRating = "Some rating"

  return (
    <div className="App">
      {overallRating === "No ratings yet" ? (
        `${overallRating}.`
      ) : (
        <>
          {overallRating} <Icon name="star" />
        </>
      )}
    </div>
  );
}
1 Like

Thank you so much. This worked. I love you sir.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.