React App, How do you map and sort titles in an Api Array in alphabetical order

Viewed 811

Hi I'm trying to map and sort titles from an API in React in alphabetical order. I keep getting .sort() is not a function and I don't know where to sort my array. I would love some help!!

import React, {useState, useEffect}from 'react';
import fetchMovies from '../../services/Movie-api';

export default function Movies(){
    const [movies, setMovies] = useState("")

    async function getMovies(){
        const movieData = await fetchMovies()

        console.log(movieData)
        setMovies(movieData.data.data)
    }

    useEffect(() => {
        getMovies()
    },[])

    return ( 
        <>
            {movies ? (
                <div>
                    <div>{movies.map((m,idx) => {
                        return <div key={idx}>{m.title}</div>
                    })}  
                    </div>
                </div>
            ):( "loading...")}
        </>
    )
}
1 Answers

got it working with this!

setMovies(movieData.data.data.sort((a, b) => a.title.localeCompare(b.title)))
Related