React assign values to an array

Question

I'm trying to handle some star rating according to some data from an api. The problem is that I have created an array for the stars and nothing is rendered. If I console .log inside the fetchMovieDetails I can see there is data. What am I missing? I even tried var stars = useState([]) but still same result

export default function MovieDetails({ match }) {
    const [movie, setMovie] = useState({});
    var stars = [];

    useEffect(() => {
        fetchMovieDetails();
    }, []);

    async function fetchMovieDetails() {

       // get data from api

        // Handle star rating
        var rating = (response.rating/ 2).toFixed(1);

        for (var i = 0; i < 5; i++) {
            var star = {};
            if (i < ~~rating) star = 'filled';
            else if (rating % 1 === 0) star = 'half-filled';
            stars.push(star);
        }

        setMovie(response.data);
    }

    return (
        <div className="movie-container">
            <div className="movie-grid">
                <div className="movie-rating">
                    <div className="star-rating">

                        // nothing is rendered here
                        {stars.map((star) => (
                            <span className="{`icon-star ${star}`}">
                                <span className="path1"></span>
                                <span className="path2"></span>
                            </span>
                        ))}
                        {(movie.rating/ 2).toFixed(1)} / 5
                    </div>
                </div>
            </div>
        </div>
    );
}

Viet Dinh · Accepted Answer · 2020-09-13 16:29:32Z

2

I guest var stars is always re-declare. Why don't you using the useState like:

const [stars, setStarts] = useState([]);

useEffect(() => {
    fetchMovieDetails();
}, []);

async function fetchMovieDetails() {

    // get data from api

    // Handle star rating
    var rating = (response.rating/ 2).toFixed(1);
    var stars = [];
    
    for (var i = 0; i < 5; i++) {
        var star = {};
        if (i < ~~rating) star = 'filled';
        else if (rating % 1 === 0) star = 'half-filled';
        stars.push(star);
    }
    
    setStarts(stars);
    setMovie(response.data);
}

answered Sep 13, 2020 at 16:29

Viet Dinh

2,0261 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jackal Over a year ago

I see, sorry still new to react and thought i could get away with some global variable in here just for the stars

Jackal Over a year ago

Yes worked right away, just had to change the var stars to let stars

Kalhan · Accepted Answer · 2020-09-13 16:55:23Z

1

If you prefer to not to keep stars in the state, and if you need to move the star logic in to a separate section then useMemo will help with it.

async function fetchMovieDetails() {
     // get data from api
    .....
    setMovie(response.data);
}

const stars = useMemo(() => {
    if (!movie.rating) {
        //if movie is not fetched then return an empty array
        return [];
    }

    const rating = (movie.rating/ 2).toFixed(1);
    const starsTemp = [];
    for (let i = 0; i < 5; i++) {
        var star = {};
        if (i < ~~rating) star = 'filled';
        else if (rating % 1 === 0) star = 'half-filled';
        starsTemp.push(star);
    }

    return starsTemp;
}, [movie]); //when movie gets changed call this function

Why i prefer this is, lets say you can add a rating by clicking on a star, and then lets say you need to show the updated rating, with your approach you have to change two states, rating property of movie and the stars, so basically if a one state is depending on a another state, its better to do like this.

edited Sep 13, 2020 at 16:55

answered Sep 13, 2020 at 16:49

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

1 Comment

Jackal Over a year ago

Interesting solution, i will try this

Collectives™ on Stack Overflow

React assign values to an array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related