Pass different values from one component to another depending on a condition-CodePudding

To one of the headers in the table, I added functionality that will be responsible for sorting this column. The code looks like this:

    export default function TableHeader() {
    const [isSorted, setIsSorted] = useState(false)
    return (
        <TableHead>
            <TableRow>
                <TableCell >Device</TableCell>
                <TableCell >Last
                    <div onClick={() => setIsSorted(!isSorted)}>
                        {isSorted
                        ? <SwapVertIcon  />
                        : <SwapVertIcon  />
                        }
                    </div>
                </TableCell>
            </TableRow>
        </TableHead>
    );
}

However, in order for the data to be sorted when the icon is clicked (and not just the effect of the moving icon), I need to somehow pass the data to the component where the table itself is formed (that is, the parent component). So that the logic would be something like this: if isSorted == false, then the data is sorted in one order (const devices), if isSorted == true, then in another (const devicesSort).

 export default function DevicesTable() {
    const devicesSort = useDevices(database, firestore, urlParams, hiddenItems, filters)
            .slice() 
            .sort((a, b) => a.lastPacketTimestamp - b.lastPacketTimestamp)

    return (
        <TableContainer >
            <Table >
                <DevicesTableHeader />
                <TableBody>
                    {devices.map((device) =>
                        <DevicesTableCell device={device}  />)}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

But I can't figure out how to pass values from one component to another. Perhaps you can tell me

CodePudding user response：

There are different way to achieve this. However the simplest is to move the condition to the parent component. Here's an example

export default function DevicesTableHeader({ isSorted, onSortClick }) {

    return (
        <TableHead>
            <TableRow>
                <TableCell align='left' style={styles.TableHeaderStyle}>Device id</TableCell>
                <TableCell align='left' style={styles.TableHeaderStyle}>Last activity
                    <div onClick={onSortClick}>
                        {isSorted
                        ? <SwapVertIcon  />
                        : <SwapVertIcon style={{transform: 'rotateY(180deg)'}} />
                        }
                    </div>
                </TableCell>
            </TableRow>
        </TableHead>
    );
}

And in parent you can pass the props as a state

 export default function DevicesTable() {
    const [isSorted, setIsSorted] = useState(false)

    const { database, firestore, filters } = useContext(AppContext)
    const { hiddenItems, urlParams } = useContext(PageContext)
    const devices = useDevices(database, firestore, urlParams, hiddenItems, filters)

    const devicesSort = useDevices(database, firestore, urlParams, hiddenItems, filters)
            .slice() 
            .sort((a, b) => a.lastPacketTimestamp - b.lastPacketTimestamp)
   const stateBasedDeviceSort = isSorted ? devices : devicesSort
    return (
        <TableContainer style={styles.TableContainerGridStyle}>
            <Table style={styles.TableStyle}>
                <DevicesTableHeader isSorted={isSorted} onSortClick={() => setIsSorted(!isSorted)} />
                <TableBody>
                    {stateBasedDeviceSort.map((device) =>
                        <DevicesTableCell device={device} key={device.description.id} />)}
                </TableBody>
            </Table>
        </TableContainer>
    );
}