This.props.history is undefined, if called from child component

Question

I am trying to validate the answers from inside the parent component. The validateAnswer function gets triggered and almost works as it should.

But I want to change the site if it was validated. So I call this.props.history.push from the parent. And this gives me an error because history is undefined.

<Answers handleClick={e => this.validateAnswer(e)} />

//Function to validate the Answer in the parent
    validateAnswer = (event) => {
    if (true) {
      //navigate to /email
      this.props.history.push({
        pathname: '/email',
        state: { lastPage: 'question' },
      });

    //Child component
         <Button
          name="1"
          label="Afrika"
          handleClick={props.handleClick}
        />

How could I fix this? Should I validate the answer directly in the Answer component?

What does logging `this` in your `validateAnswer()` function return? — Stretch0, Mar 09 '18 at 12:13

score 0 · Answer 1 · answered Mar 09 '18 at 12:16

0

Try this:

<Answers handleClick={this.validateAnswer} />

// Function to validate the Answer in the parent
validateAnswer(event){
if (true) {
  //navigate to /email
  this.props.history.push({
    pathname: '/email',
    state: { lastPage: 'question' },
  });

// Child component
 <Button
  name="1"
  label="Afrika"
  handleClick={(e) => props.handleClick(e) }
/>

answered Mar 09 '18 at 12:16

Stretch0

5,526
3
48
93

I tried it like that, but still got the exact same error. – Fabio ha Mar 09 '18 at 12:38

This.props.history is undefined, if called from child component

1 Answers1