0

I have a BoardHome.tsx component and I can't pass props (or state) to the Board.tsx component in the Link. I only get an empty object or null.

BoardHome.tsx

export default function BoardHome(props: { id: number; title: string }) {
  //props are displayed correctly
  console.log(props)

  return (
    <div className="board-home">
      <Link
        className="board-link"
        to={{ pathname: '/board/' + props.id }}
        state={{ id: props.id }}
      >
        <div className="board-fade">
          <h2 className="board-title">{props.title}</h2>
        </div>
      </Link>

      <Routes>
        <Route path="/board/:id" element={<Board />} />
      </Routes>
    </div>
  )
}

Board.tsx

import React from 'react'
import './board.scss'
import '../../index.css'

interface BoardState{
  id: number
}

export default class Board extends React.Component<{ id?: number }, BoardState> {
  render() {
    //empty object
    console.log(this.props)
    //null
    console.log(this.state)

    return (
        <div className="board-header">
          <h1 className="board-h1">{this.state.id}</h1>
        </div>
    )
  }
}

I don't know if it matters, but both components should be class components, not function components.

I tried different ways, but it still failed to pass the props.

Was reading:

How to pass data from a page to another page using react router How to pass props within components with react-router v6 how to pass props to react router v6 link How to pass props using react router link v6? React: how to pass props through a Link from react-router-dom? How to pass data from a page to another page using react router

all these answers are for functional components

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Functional and class components are quite the same, the first answer should work aswell with the class component. Just adapt it. `` and get it from location props. Take care to wrap your component with your router. Check here https://stackoverflow.com/questions/37516919/react-router-getting-this-props-location-in-child-components – Alexis Nov 07 '22 at 14:12
  • The first answer you linked is how you would pass the state via the link, but route state isn't passed as a prop, it's accessed from the routing context via the `location` object via the `useLocation` hook. Class components can't directly use React hooks though, so you'll need to roll your own custom `withRouter` Higher Order Component. The second linked duplicate is how to do that. – Drew Reese Nov 07 '22 at 16:29
  • You could also just read the `id` route path param with `const { id } = useParams()`, but you'd have the same issue using the hook in a class component, also solved with using a `withRouter` HOC. This is actually the safer option as the `Board` component won't relay on the route transition to get the correct board id value. – Drew Reese Nov 07 '22 at 16:31

1 Answers1

0

You are not passing any prop to the Board. Pass the prop as you would always do in React.

  <Routes>
    <Route path="/board/:id" element={<Board id={props.id} />} />
  </Routes>

You forgot adding your constructor

   export default class Board extends React.Component<{ id?: number }, BoardState> {
  constructor(props) {
    super (props);

    this.state = {
      id: this.props.id, // or make this optional in the interface
    }
  }

  render() {
    //empty object
    console.log(this.props?.id)
    //null
    console.log(this.state?.id)

    return (
        <div className="board-header">
          <h1 className="board-h1">{this.state.id}</h1>
        </div>
    )
  }
}
Fer Toasted
  • 1,274
  • 1
  • 11
  • 27
  • Just FYI, saving passed props to local state is a React anti-pattern. Props should generally be consumed directly. – Drew Reese Nov 07 '22 at 16:34
  • yeah, but the `state.id` was not optional, but I have edited it to avoid it. Thanks for pointing out :). – Fer Toasted Nov 07 '22 at 17:13
  • 1
    I meant that using state to hold the passed `id` prop value is an anti-pattern, just reference `this.props.id` in the component and avoid an entire class of state synchronicity bugs. – Drew Reese Nov 07 '22 at 17:24
  • Oops, I got it. One more reason to avoid using class components :). – Fer Toasted Nov 07 '22 at 17:33