Rating in Spfx for low , high ,medium

Question

Hey i want to display rating in spfx webpart as below image from sharepoint list choice column if value is high , low , medium for respective columns is

Answer 1

My test code:

import * as React from 'react';
import styles from './ReactPnpSpfx.module.scss';
import { IReactPnpSpfxProps } from './IReactPnpSpfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Web } from "sp-pnp-js";
export default class ReactPnpSpfx extends React.Component<IReactPnpSpfxProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }
  public render(): React.ReactElement<IReactPnpSpfxProps> {
    return (
      <div className={styles.reactPnpSpfx}>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={styles.button}>
                <span className={styles.label}>Learn more</span>
              </a>
            </div>
            {
              this.state.items.map(function(item){
                if(item.AverageRating<2){
                  return (
                    <div>
                    <button className={styles.low}>&nbsp; </button> 
                    <button className={styles.low}>&nbsp; </button> 
                    <button >&nbsp; </button>
                    <button >&nbsp; </button> 
                    <button >&nbsp; </button> 
                    <button >&nbsp;</button>
                    <button >&nbsp; </button> 
                    <button >&nbsp; </button> 
                    
                    </div>                         
                  )
                }else if(item.AverageRating<4&&item.AverageRating>=2){
                  return (
                    <div>
                    <button className={styles.medium}>&nbsp; </button> 
                    <button className={styles.medium}>&nbsp; </button> 
                    <button className={styles.medium}>&nbsp; </button>
                    <button className={styles.medium}>&nbsp; </button> 
                    <button >&nbsp; </button> 
                    <button >&nbsp;</button>
                    <button >&nbsp; </button> 
                    <button >&nbsp; </button> 
                    
                    </div>                         
                  )
                }else{
                  return (
                    <div>
                    <button className={styles.high}>&nbsp; </button> 
                    <button className={styles.high}>&nbsp; </button> 
                    <button className={styles.high}>&nbsp; </button>
                    <button className={styles.high}>&nbsp; </button> 
                    <button className={styles.high}>&nbsp; </button> 
                    <button className={styles.high}>&nbsp;</button>
                    <button >&nbsp; </button> 
                    <button >&nbsp; </button> 
                    
                    </div>                         
                  )
                }
              })
            }
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);

    web.lists.getByTitle("test2").items.get().then((r) => {
      
      this.setState({items:r});
    
    })
  }
}

CSS:

.high{
  background-color: red;
}
.medium{
  background-color: orange;
}
.low{
  background-color:lightblue;
}

Test Result: Of course,you could write a Rating component.