Unable to pass Props to grand child component via Link in React 18

Question

Parent Component (UserList Component):

const UsersList = (props) => {    
    const removeCandidateById = (id) => {
        props.removeCandidateDetails(id);
    }    
    const RenderUsersList = props.CandidateDetails.map((userDetails) => {
        return (
            <UserCard userDetails={userDetails} removeUser={removeCandidateById }  key={userDetails.id}/>
        )
})

From UserCard Component I would like to pass the props data to another child component via the Link state object like state: { userDetails: this.props.userDetails } , but its always undefined in the grand child component which is configured in the /userDetail path.

I tried by Functional component way also. Via Link I cant get the solution for this.

Child Component (UserCard Component) :

class UserCard extends React.Component {
  constructor(props) {
    super(props);
    const { id, name, age, occupation, phone, imgUrL } = props.userDetails;
  }
  render() {
    return (
      <Col className="col col-lg-2 mb-3 mt-4">
        <div className="card">
          <div className="card-body">
            <h5 className="card-title"> {this.name}</h5>
            <Link
              to={{
                pathname: `/userDetail/${this.id}`,
                state: { userDetails: this.props.userDetails },
              }}
            >
              <img
                className="img"
                src={avatar}
                style={this.imgStyle}
                alt="avatar"
              />
            </Link>
          </div>
        </div>
      </Col>
    );
  }
}

export default UserCard;

If the component that should read history object is a class component, then you should wrap it with withRouter — Max G., Jul 08 '22 at 13:49
@Maxime where should I wrap it with ? `usercard's` render content should be wrapped with ? I am getting the error `"You cannot render a inside another . You should never have more than one in your app"` - I have my routing set up at App.js with — Saravana, Jul 08 '22 at 13:56

User456 · Accepted Answer · 2022-07-12T12:13:02.647

As you said, your version of react-router-dom is 6.3.0. In the new version, you set the state for Link differently. The state's value in the object passed to the to prop will be ignored, so you need to pass the state separately in the state prop.

<Link
  to={{
    pathname: `/userDetail/${this.id}`,
  }}
  state={{ userDetails: this.props.userDetails }}
>
  <img
    className="img"
    src={avatar}
    style={this.imgStyle}
    alt="avatar"
  />
</Link>

Now, to access the state, you can extract state from the react-router-dom useLocation hook.

const { state } = useLocation();
// you have two ways to access userDetails
const { userDetails } = state // 1
const userDetails = state.userDetails // 2

Unable to pass Props to grand child component via Link in React 18

1 Answers1