Star Ratings

import react, { useEffect, useState } from "react";

export default function App() {
  const rating = (stars)=>'★★★★★☆☆☆☆☆'.slice(5-stars,10-stars)
  const [str,setStr] = useState(('★★★★★☆☆☆☆☆'.slice(5,10)));
  const handleRating=(str)=>{
    setStr(str)
  }
  return (<>
    <h1>Star Ratings {('★★★★★☆☆☆☆☆'.slice(5-str,10-str))}</h1>
    <p style={{backgroundColor:str===1 && 'blue',color:str===1 && 'white'}} className="styled-link" onClick={()=>handleRating(1)}>Rating(1) : {rating(1)}</p>
    <p style={{backgroundColor:str===2 && 'blue',color:str===2 && 'white'}} className="styled-link" onClick={()=>handleRating(2)}>Rating(2) : {rating(2)}</p>
    <p style={{backgroundColor:str===3 && 'blue',color:str===3 && 'white'}} className="styled-link" onClick={()=>handleRating(3)}>Rating(3) : {rating(3)}</p>
    <p style={{backgroundColor:str===4 && 'blue',color:str===4 && 'white'}} className="styled-link" onClick={()=>handleRating(4)}>Rating(4) : {rating(4)}</p>
    <p style={{backgroundColor:str===5 && 'blue',color:str===5 && 'white'}} className="styled-link" onClick={()=>handleRating(5)}>Rating(5) : {rating(5)}</p>
  </>)
}