Dynamic Rating Problem | Next.js | Page 1

#

This is an implementation of card component (I stripped classes to prevent text limit)

const Shop = (props: {
    shopName: string,
    rating: number,
}) => {

    const roundedHalfRating = Math.round(props.rating * 2) / 2;

    return (
        <div className="card card-compact w-72 bg-gray-700 shadow-xl rounded-md mb-6">
            <figure><img src="/beans.jpeg" alt="Shoes" /></figure>
            <div className="card-body">
                <h2 className="card-title">{props.shopName}</h2>
                <div className="">
                    <div className="">
                        <input type="radio" name="rating-10" className="rating-hidden" />
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===0.5}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===1.0}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===1.5}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===2.0}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===2.5}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===3.0}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===3.5}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===4.0}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===4.5}/>
                        <input type="radio" name="rating-10" className="" checked={roundedHalfRating===5.0}/>
                    </div>
                    <button className="btn btn-primary">More Info</button>
                </div>
            </div>
        </div>
    )
}

export default Shop

#

And this is how I am calling it

            <Shop shopName="a" rating={0}/>
            <Shop shopName="b" rating={1}/>
            <Shop shopName="c" rating={1.2}/>

#

And this is what I am getting

#Dynamic Rating Problem