Pass State from component to parent - reactjs

Question

If have a Listing page that contains a table component:
class ListingPage extends Component {
static propTypes = {
getTableData: PropTypes.func.isRequired,
};
componentDidMount() {
this.props.getTableData(*I want to Pass in sortlist state here*);
}
render() {
return (
<div>
<Table />
</div>
}
And the Table component maintains a sortlist state:
class Table extends Component {
constructor(props) {
super(props);
this.state = {
sortlist: 'someStringData',
};
render() {
<div>
Table Information etc.
</div>
}
The sortlist is changed in the table component through various functions. How can I pass that sortlist state up to the ListingPage component?

Answer 1

Pass a function along to Table from ListingPage that gets called whenever the sortlist is changed.
ListingPage component:
class ListingPage extends Component {
static propTypes = {
getTableData: PropTypes.func.isRequired,
};
onSortChange(s) {
console.log(s);
}
render() {
return (
<div>
<Table onSortChange={s => this.onSortChange(s)} />
</div>
);
}
}
Table component:
class Table extends Component {
constructor(props) {
super(props);
this.state = {
sortlist: 'someStringData',
};
}
somethingThatTriggersSortListToChange(s) {
this.props.onSortChange(s);
}
render() {
return <div>Table Information etc.</div>;
}
}

Answer 2

Considering above answer, You can also use redux store in this case when you want to pass state from child to parent. Make an action call and store the state in redux store and get the state in parent component. This is another way of playing from child to parent component.
this.props.saveToStore(this.state.sortlist);
In your action file
cost SAVE_TO_STORE = “SAVE_TO_STORE”;
export function saveToStore(sortlist){
return {
type: SAVE_TO_STORE,
sortlist
}
}
Like store state in reducer and get the state in your parent component and return as props i.e., in mapStateToProps(state, props) function using redux connect method.