How to pass a state to another state in same component using functional component in React

Question

I am working on a React project, In that project I am trying to sorting. In my component I have

Two buttons. The first button is Change to Min and the second button is Change to Max.

And in the same component I am showing the data that is coming from the backend.

Now If I click the button the sorting logic state has to apply to the data what I am showing by

Using the map method.

This is list.js

import React, { useState, useEffect } from 'react';
import { Table, Button } from 'reactstrap';
import Aumservice from '../../service/aum-service';
import { MdEdit } from 'react-icons/md';
import { IconContext } from "react-icons";


const List = (props) => {

const [sortData, setSortData] = useState(null)

    const [data, setData] = useState([])

useEffect(() => {
        (async function () {
            const response = await Aumservice.getAum()
            const dataResponse = response.data.list.map(ele => ele.maxValue)
            setSortData(dataResponse)
            setData(response.data.list)
        })()
    }, [])

const sortAscending = () => {
        let sortedData = sortData.sort((a, b) => a - b)
        console.log(sortedData)
        setData(sortedData)
    }
    const sortDescending = () => {
        let sortedData = sortData.sort((a, b) => b - a)
        setData(sortedData)
    }

return (
        <div>
<IconContext.Provider
                value={{ size: '25px' }}
            >
                <Table bordered>
                    <thead>
                        <tr>
                            <th>So No</th>
                            <th>Min</th>
                            <th>Max</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {setData.map((currentValue, index) => {
                            return < tr key={index + 1} >
                                <th scope="row">{index + 1}</th>
                                <td>{currentValue.minValue}</td>
                                <td>{currentValue.maxValue}</td>
                               </tr>
                        })}
                    </tbody>
                </Table>
            </IconContext.Provider>
            <div className='min pr-5'>
                <Button onClick={sortAscending} className='primary'>Change to Min</Button>
            </div>
            <div className='max'>
                <Button className='secondary'>Change to Max</Button>
            </div>
        </div >
    )
}

export default List

If I am not clear with my doubt please put a comment.

Answer 1

If I get it right, you want your data to be sorted by maxValue, in a way that depends on which button is clicked (ascending/descending).

1. There is a typo in the mapping element, instead of setData.map((.. you need data.map((...
2. An onClick event must be added at the second button with the sortDescending function.
3. You do not need a second variable sortData for sorting your data, you can sort the existing list that you get from the response.

According to the above conclusions, I have edited your code:

import React, { useState, useEffect } from 'react';
import { Table, Button } from 'reactstrap';
import Aumservice from '../../service/aum-service';
import { MdEdit } from 'react-icons/md';
import { IconContext } from "react-icons";


const List = (props) => {


    const [data, setData] = useState([])

    useEffect(() => {
        (async function () {
            const response = await Aumservice.getAum()
            setData(response.data.list)
        })()
    }, [])

    const sortAscending = () => {
      let copyData = JSON.parse(JSON.stringify(data));
      // If you want to sort by minValue,just change accordingly the below properties
      let sortedData = copyData.sort((a, b) => (a.maxValue > b.maxValue) ? 1 : -1);
      console.log(sortedData)
      setData(sortedData)
    }
    
    const sortDescending = () => {
      let copyData = JSON.parse(JSON.stringify(data));
      // If you want to sort by minValue,just change accordingly the below properties
      let sortedData = copyData.sort((a, b) => (a.maxValue < b.maxValue) ? 1 : -1);
      console.log(sortedData)
      setData(sortedData)
    }

    return (
        <div>
            <IconContext.Provider
                value={{ size: '25px' }}
            >
                <Table bordered>
                    <thead>
                    <tr>
                        <th>So No</th>
                        <th>Min</th>
                        <th>Max</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {data.map((currentValue, index) => {
                        return <tr key={index + 1} >
                                    <th scope="row">{index + 1}</th>
                                    <td>{currentValue.minValue}</td>
                                    <td>{currentValue.maxValue}</td>
                                </tr>
                    })}
                    </tbody>
                </Table>
            </IconContext.Provider>
            <div className='min pr-5'>
                <Button onClick={sortAscending} className='primary'>Change to Min</Button>
            </div>
            <div className='max'>
                <Button onClick={sortDescending} className='secondary'>Change to Max</Button>
            </div>
        </div >
    )
}

export default List