1

My use case is I have a list of contacts, I have used material UI listItem for creating list, I am passing contact object through route to another component, I am getting state as null when I checked using useLocation hook, I am using v6 router

Code:

 <List className={classes.contactList}>
                {
                 props.contacts && props.contacts.map(contact => (
                     <ListItem component={Link} to={{pathname: `/contact/${contact.id}`, state:{ contact: props.contacts }}} divider={true} key={contact.id}>
                         <ListItemAvatar>
                             <Avatar>
                                <PersonPinCircleRounded></PersonPinCircleRounded>
                             </Avatar>
                         </ListItemAvatar>
                         <ListItemText primary={contact.name} secondary={contact.email}></ListItemText>
                         <DeleteOutline style={{ color: 'red'}} onClick={() => deleteHandler(contact.id)}></DeleteOutline>
                     </ListItem>

                 ))
                }
            </List>

1 Answer 1

0

In react-router-dom version 6 state is now a top-level prop, not a property on the to prop object.

<ListItem
  component={Link}
  to={`/contact/${contact.id}`} 
  state={{ contact: props.contacts }}
  divider={true}
  key={contact.id}
>
  ...
</ListItem>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.