How to access the state that was sent using Link to in another component

Question

I am trying to send props to another component when the Link to is used.

const printArr = sameLetterArr.map((obj, idx) => {
  return (
    <Link to={{ pathname: '/coursePage', state: { linkState: 'hello' } }} key={idx}>
      <li className={'DeptList'}>
        {obj.CRS_SUBJ_CD} - {obj.DEPT_NAME}
      </li>
    </Link>
  )
})

This is the Link to that I am trying to use, and I am sending in linkState that has a string of hello. To receive it I have tried this.props.location.state and this.props.history.location.state but they both result in error:

TypeError: undefined is not an object (evaluating 'this.props.history.location').

Not sure what can be causing this. Any insight would be great.

EDIT: the CoursePage component below:

render () {
    console.log(this.props.location.linkState)
    return (
      <div className='App'>
        <header className="Header"></header>
        <div>
          <h1>Dept</h1>
          <p><ListCourse letter={this.props.title}/></p>
        </div>
        <footer className="Footer">This is the footer</footer>
      </div>
    )
  };

the answer is here: https://stackoverflow.com/q/30115324/12348877 — CanUver, Jun 09 '20 at 23:38
try console.log(this.props.location.state.linkState), it should work fine if you're on class component. — CevaComic, Jun 09 '20 at 23:45
If he is on a functional component he does not have access to `this.props` — dabishan, Jun 09 '20 at 23:47
I posted the coursePage component above. And @CanUver I have seen that link and I couldn't find it helpful. Maybe I might have missed something. Will take a look at it once more. — Shalin Patel, Jun 09 '20 at 23:47
@ShalinPatel , are you using functional component or a class component. It simply may be refering to the missing `this.props` — dabishan, Jun 09 '20 at 23:49
I posted both cases in an answer below, I think he knows better what kind of component he uses. — CevaComic, Jun 09 '20 at 23:50
@dabishan I am using a functional component and I have included the this.props — Shalin Patel, Jun 09 '20 at 23:51
@ShalinPatel, you are contradicting yourself in this reply and @CevaComic's answer. But if you are using functional component, you cannot use `this.props` and have to follow this structure `export default CoursePage = (props) => console.log(props.location.state)` as done in the first block of @CevaComic's answer — dabishan, Jun 09 '20 at 23:55

score 1 · Accepted Answer · answered Jun 09 '20 at 23:52

You need to use withRouter HOC to make history and other route-props available in your class component:

import { withRouter } from 'react-router-dom'
class CoursePage extends Component<IProps, IState> {
  componentDidMount() {
    console.debug(this.props) // it will print all route-props (history, location, match)
  }
  render() {
    return <>CoursePage</>
  }
}

export default withRouter(CoursePage)

If using functional component, you can use useHistory hook:

const history = useHistory(); // inside function component

score 0 · Answer 2 · answered Jun 09 '20 at 23:44

0

If your using functional components , the state is stored in props.location.state

export default props => {
    console.log('state', props.location.state)

    return null
}

If you are using class components you must use the constructor in order to get the props. And your state will be stored in this.props.location.state

export default class Demo extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        console.log('state', this.props.location.state)

        return null
    }
}

answered Jun 09 '20 at 23:44

CevaComic

2,056
2
6
12

Yes I have a class component and I have the constructor with the props – Shalin Patel Jun 09 '20 at 23:46
1

Use of [constructor](https://reactjs.org/docs/react-component.html#constructor) is not must if it is doing nothing except `super(props)`. Yes, it is must when you are initializing the state i.e.`this.state = { ... code }` or binding methods :) – Ajeet Shah Jun 10 '20 at 00:28

How to access the state that was sent using Link to in another component

2 Answers2