Create a link to a user ID in a table-CodePudding

I have a simple table and I want to navigate to the user.id but it throws off the formatting. Is there another way to do this or do I move LinkToUser?

I have removed all styling so there is nothing conflicting.

import styled from 'styled-components'
import { Link } from 'react-router-dom'

export const LinkToUser = styled(Link)`
`

export const StyledTable = styled.table`
`;

export const THead = styled.thead`
`;

export const TR = styled.tr`
`;

export const TBody = styled.tbody`
`;

export const TH = styled.th`
`;

export const TD = styled.td`
`;

    <StyledTable>
        <THead>
            <TR>
                <TH>{copy.tableHeaderA}</TH>
                <TH>{copy.tableHeaderB}</TH>
                <TH>{copy.tableHeaderC}</TH>
            </TR>
        </THead>
        <TBody>
            {fetchedUsersData?.map((user: Users) => (
                <LinkToUser to={`/users/${user.id}`}>
                    <TR key={user.id}>
                        <TD>
                            <p>{user.username}</p>
                        </TD>
                        <TD>
                            <p>{user.name}</p>
                        </TD>
                        <TD>
                            <p>{user.company.name}</p>
                        </TD>
                    </TR>
                </LinkToUser>
            ))}
        </TBody>
    </StyledTable >

CodePudding user response：

Use onClick and history if you are using react-router-dom

<StyledTable>
        <THead>
            <TR>
                <TH>{copy.tableHeaderA}</TH>
                <TH>{copy.tableHeaderB}</TH>
                <TH>{copy.tableHeaderC}</TH>
            </TR>
        </THead>
        <TBody>
            {fetchedUsersData?.map((user: Users) => ( 
                    <TR key={user.id}
                     onClick={()=>{
                      history.push(`/users/${user.id}`)
                     }
                    >
                        <TD>
                            <p>{user.username}</p>
                        </TD>
                        <TD>
                            <p>{user.name}</p>
                        </TD>
                        <TD>
                            <p>{user.company.name}</p>
                        </TD>
                    </TR> 
            ))}
        </TBody>
    </StyledTable >

CodePudding user response：

You have to move key to the parent component inside map function like this, from:

{fetchedUsersData?.map((user: Users) => (
                <LinkToUser to={`/users/${user.id}`}>
                        <TR key={user.id}>

to:

{fetchedUsersData?.map((user: Users) => (
                <LinkToUser to={`/users/${user.id}`} key={user.id}>
                    <TR >

Also make sure this table is inside router parent tree. Another problem might be to not be able to have Link as direct child of TableBody, in that case i suggest to move your link inside one of the TD elements