I have an array of ids relating to objects saved in the database.

<TableBody>
    {
        ids.map((id, i) => (
            <CustomSocketRow
            key={i}
            id={id}/>
        ))
    }
</TableBody>

I am currently mapping each id to a websocket, where data is fetched on connecting, and data is updated in real-time if changed elsewhere on the site. The problem I have is that, because I am only mapping the Ids I am unable to sort the data within the table, which is essential.

I need to sort by a date field in one of the columns which can be thought of as the internal state of one of the rows. I need to somehow wait until all of the rows are populated with data, and then sort the rows.

I think that this is an issue with the architecture of the components, more than a syntactical problem, but I don't know the best approach.