- I've been attempting to showcase the data in a Redux-friendly manner.
- When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected.
- For this purpose, I implemented the fetchHistorySportsDatafromURL method in the actions.
- Subsequently, I invoked the fetchHistorySportsDatafromURL method within the tabs of the drawer.
- Unfortunately, the data isn't being rendered as expected.
- Upon debugging, I noticed that the const historySports = this.props.historySports; returns undefined.
- Even though I'm using mapDispatchToProps, my attempts have not been fruitful.
- I am striving to exhibit my data here while reading it from the API {historySports}.
- All the rendering code is contained within the file sports-advanced-search.js.
- Below, I have included my code snippet and a link to the sandbox for reference.
https://codesandbox.io/s/5x02vjjlqp
Actions:
export const fetchHistorySportsDatafromURL = data => {
return dispatch => {
if (data != undefined) {
return axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/comments",
data: data,
config: { headers: { "Content-Type": "application/json" } }
})
.then(function(response) {
console.log("fetchSportsHistoryData--->", response);
dispatch(fetchSportsHistoryData(response.data));
})
.catch(function(response) {
dispatch(fetchSportsHistoryData([]));
});
}
};
};
Render Code:
getHistoryData = values => {
this.props.fetchHistorySportsDatafromURL();
};
render() {
const { classes } = this.props;
const { value } = this.state;
const Sports = this.props.Sports;
const historySports = this.props.historySports;
console.log("historySports--->", historySports);
console.log("this.props--->", this.props);
console.log("this.state--->", this.state);
}
const mapDispatchToProps = dispatch => {
return {
fetchHistorySportsDatafromURL: () => {
dispatch(fetchHistorySportsDatafromURL());
}
};
};
export default withStyles(styles)(
connect(
null,
mapDispatchToProps
)(ScrollableTabsButtonAuto)
);