I'm having issues for passing data received as a response from one form component to another component.
I'm using a class component to handle lifecycle methods such as componentDidMount() for api calls to fill some info for select options for a form.
I have looked through the different answers already made here but none seems to work since i get the error
TypeError: undefined has not properties when trying to display the data.
Im capturing the data from a response as shown below
Main component
handleSubmit = (event) => {
axios
.get("http://localhost:3000/results", {
params: {
...
},
})
.then((res) => {
this.setState({ submitted: true });
return res.data;
})
.then((data) => {
this.setState({ res_data: data });
});
event.preventDefault();
then using the render method to make the redirection if the form was submitted as shown below
var response_data = this.state.res_data
if (this.state.submitted) {
console.log("Redirecting")
return <Redirect push to={{ pathname: "/results", state:{res_data: response_data} }} />;
} else
the component handling the /results route is a simple header with a console.log to check for data.
Second Component /results route
const Results = (props) => {
console.log(this.locations.state)
return <h2>Results</h2>
}
export default Results
App component
...
<Switch>
<Route path="/signup">
<SignUp />
</Route>
<Route path="/results">
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
