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;