How i can make a sorted table using react-semantic-ui and functional component?

Question

I'm trying to make this table sortable but in the example are using class component and i have a functional component.

I try to make this way:

    const WorkOutList = props => {

    const handleSort = (clickedColumn) => () => {

        const [column, data, direction] = useState(0);

        if (column !== clickedColumn) {
          this.setState({
            column: clickedColumn,
            data: _.sortBy(data, [clickedColumn]),
            direction: 'ascending',
          })

          return
        }

        this.setState({
          data: data.reverse(),
          direction: direction === 'ascending' ? 'descending' : 'ascending',
        })
    }

    const renderRows = () => {
        const list = props.list || []
        return list.map(workout => (

            <Table.Row key={workout.id}>
                <Table.Cell>{workout.tempoGasto}h</Table.Cell>
                <Table.Cell>{workout.tipoTarefa}</Table.Cell>
                <Table.Cell>{workout.data}</Table.Cell>
                <Table.Cell>
                    <Button
                    animated='vertical'
                    onClick={() => props.removeWorkout(workout)}
                    >
                        <Button.Content hidden>Deletar</Button.Content>
                        <Button.Content visible>
                            <Icon name='trash' />
                        </Button.Content>
                    </Button>
                </Table.Cell>
            </Table.Row>
        ))
    }

    return (
        <Table sortable celled fixed>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell
                     sorted={props.column === 'tempoGasto' ? direction : null}
                     onClick={handleSort('tempoGasto')}
                    >
                        Tempo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'tipoTarefa' ? direction : null}
                     onClick={handleSort('tipoTarefa')}
                    >
                        Tipo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'data' ? direction : null}
                     onClick={handleSort('data')}
                    >
                        Data
                    </Table.HeaderCell>
                    <Table.HeaderCell>
                        Ações
                    </Table.HeaderCell>
                </Table.Row>
            </Table.Header>

            <Table.Body>
                {renderRows()}
            </Table.Body>
        </Table>
    )
}

I'm using react and redux, but i'm receiving:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

The full code is in pastebin

Answer 1

This is because you have used useState hook inside of a function.

 const [column, data, direction] = useState(0);

You need to write this at your component level outside of any function.

Another issue is, you have incorrect definition of useState . useState give you pair of the value and it's setter function.

const [data, setData]  = useState(0)

Now you can change value of data using setData setter function,

setData(1)

Read more about useState here .

---

You can actually store object in state,

const [data, setData] = useState({
                            column: "",
                            data: "",
                            direction: "",
                        })

And use setData setter function for state change,

setData(prevState => ({
     ...prevState,
     column: clickedColumn,
     data: _.sortBy(prevState.data, [clickedColumn]),
     direction: 'ascending',
  })
)

Check this for how to use useState .