0

I can't figure out why my console.log(this); give me a this.props, this.context this.ref blank objects and this.history undefined...

So I try to redirect after a click on a button, but nothing happen.

Furthermore, I don't know how to complete my PropTypes validation history without my object.

Thank you for your help !

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class myComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myParam: 1,
      myQuery: 2,
    };

    this.handleChange = this.handleChange.bind(this);
    this.goToPlayscanDashboard = this.goToPlayscanDashboard.bind(this);
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  goToPlayscanDashboard = (e) => {
    e.preventDefault();
    console.log(this.history);
    // ERROR: this.props.history.push is not a function
    this.props.history.push(`params/${this.state.myParam}/?myQuery=${this.state.myQuery}`);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.goToPlayscanDashboard}>
          <select
            id="myParam"
            name="myParam"
            value={this.state.myParam}
            onChange={this.handleChange}
          >
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>

          <input
            type="text"
            id="myQuery"
            name="myQuery"
            required
            pattern="^\d{1,3}$"
            value={this.state.myQuery}
            onChange={this.handleChange}
          />

          <button type="submit">Search</button>
        </form>
      </div>
    );
  }
}

myComponent.propTypes = {
  history: PropTypes.string,
};

myComponent.defaultProps = {
  history: '/',
};

export default myComponent;
GuillaumeRZ
  • 1,578
  • 3
  • 15
  • 29
  • history: PropTypes.string ??? – Alex May 09 '18 at 12:12
  • 1
    doing ` myComponent.defaultProps = { history: '/', };` makes your propType chack pass always because you're passing '/' as history props if you want to check if the router/browser-history is passing in history, remove the defaultProps. plus am sure history is array not string :-) – Femi Oni May 09 '18 at 12:16
  • I think you need to show code adding history to this component. can't tell from here why history is undefined from here – Femi Oni May 09 '18 at 12:20

0 Answers0