How can I sort a table by ascending numbers from a specified column in ReactJS?

Question

I have a table that get data from an object called blockInfo:

            <table>
                <thead>
                    <tr>
                        <th>Timestamp</th>
                        <th>Block #</th>
                        <th>Block Hash</th>
                        <th>Miner</th>
                        <th>Gas used</th>
                        <th>Txs #</th>
                    </tr>
                </thead>
                <tbody>
                    {blockInfo.map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
                    )}
                </tbody>
            </table>

It produces that table:

I want to sort that table by ascending numbers from Block # column, I tried adding .sort() in this way but it didn't work:

                <tbody>
                    {blockInfo.sort((a, b) => {
                        if (a > b) return 1;
                        if (a < b) return -10;
                        return 0;
                    }).map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
                    )}
                </tbody>

Does anyone how can I do that?

Answer 1

I believe the mistake lies in your sorting function. The arguments a and b each represent an object in the blockInfo list. Therefore, for the sorting function to work properly, you need to specify the key on which you wish to sort.

Try this code:

<tbody>
         {blockInfo.sort((a, b) => {
                if (a.number > b.number) return 1; // .number is added 
                if (a.number < b.number) return -10; // .number is added
                return 0;
             }).map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
             )}
</tbody>