My goal is to retrieve a prop from MapsStateToProps using react-redux's connect and then pass it to a child component. This prop serves as an argument for a function, which in turn returns something that becomes the state of the child component.
Although I can see that the props are being updated, the change doesn't reflect immediately when used as an argument. Instead, I have to navigate to another component (using react-routers) and then return to the original component to see the desired result. Is there a way to make this change happen without having to switch components? Perhaps I'm missing something, or maybe what I'm attempting isn't the ideal method in React. Any advice?
import React, { Component } from 'react';
import {connect} from "react-redux";
import filterData from "../../States/AllStates/filterData"
import BookComponent from "./BookComponent";
const mapStateToProps = state => {
return {
fmlProps: state.ReducerName.fmlProps
}
};
class Testing extends Component {
state = {
// The use of this.props.fmlProps does not update immediately. Requires switching components
XXX: filterData(this.props.fmlProps)
}
render() {
return (
<>
<h1>{this.props.fmlProps}</h1> {/* correct value displayed */}
{this.state.XXX.map(FakeData => (
<BookComponent
key={FakeData.planNumber}
PNum={FakeData.planNumber}
PName={FakeData.planName}
/>))}
</>
);
}
}
export default connect(mapStateToProps, null)(Testing);