Unsure as to how to sort a list in React.js

August 3, 2022

I’m trying to sort a list called theme before I send it to the backend and was having trouble doing so. I commented where I want the list to be sorted, I also want it to be kept as the same variable name. How can I sort the list theme?

Here is my code:

import { useState } from "react";
import { v4 as uuidv4 } from 'uuid';

const ProjectAdminForm = () => {
    // Adding basic info
    const [sdg, setSDG] = useState('')
    const [goal, setGoal] = useState('')
    const [orginization, setOrginization] = useState('')
    const [source, setSource] = useState('')
    const [location, setLocation] = useState('')
    const [published, setPublished] = useState('')
    const [website_url, setWebsiteURL] = useState('')
    const [assignment_type, setAssignmentType] = useState('')
    const [sharepoint_link, setSharepointLink] = useState('')
    const [statement, setStatement] = useState('')
    const [error, setError] = useState(null)


    // Adding themes
    const [theme, setThemes] = useState([]);
    const available_themes = ['Demographic', 'Economical', 'Socio-cultural', 'Technological', 'Ecological', 'Political'];

    


    const handleSubmit = async (e) => {
        // I WANT TO SORT THE THEME LIST OVER HERE
        // SORT THEME LIST HERE
        


        e.preventDefault() // Prevents refresh of page from happening
        console.log('button clicked')
        const project = {sdg, goal, orginization, source, location, published, website_url, assignment_type, theme, sharepoint_link, statement}
        console.log(project)
        console.log(theme)                
        // Sending form response to backend
        const response = await fetch('/api/projects', {
            method: 'POST',
            body: JSON.stringify(project),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        const json = await response.json
        

        // Checking for error
        if (!response.ok) {
            setError(json.error)
        }
        if (response.ok) {
            // Reset form inputs back to empty string
            setSDG('')
            setGoal('')
            setOrginization('')
            setSource('')
            setLocation('')
            setPublished('')
            setWebsiteURL('')
            setAssignmentType('')
            setThemes([])
            setSharepointLink('')
            setStatement('')
            
            setError(null)
            console.log('new project added', json)
        }
    }

    
}

export default ProjectAdminForm

If I need to provide more of my code, please let me know!

>Solution :

const project = {
  sdg,
  goal,
  orginization,
  source,
  location,
  published,
  website_url,
  assignment_type,
  theme: [...theme].sort(),
  sharepoint_link,
  statement,
};

should be enough.

[...theme] takes a shallow copy of the array, .sort() sorts the shallow copy in-place and returns it for use in the const project = ... object.