CODEWITHSUNDEEP
reactjs
EvilEddie
EvilEddie

Reputation: 1035

Pass State from component to parent

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?

Upvotes: 0

Views: 59

Answers (2)

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

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.

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30082

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>;
  }
}

Upvotes: 4

Related Questions