Reaction: you must call the parent to reprocess the component

Question

I am creating a table with rows and substrings. When I remove the substring, I need to re-display the entire component.

import React from 'react'; import ReactDOM from 'react-dom'; import auth from './auth' export class FormList extends React.Component{ constructor(props) { super(props); auth.onChange = this.updateAuth.bind(this) this.state = {results: []}; } componentWillMount() { auth.login(); } // call to get the whole list of forms for react to re-render. getForms() { if(this.state.loggedIn) { $.get(call server url, function(result) { this.setState({ results: result.data.forms }); }.bind(this)); } } updateAuth(loggedIn) { this.setState({ loggedIn: loggedIn }); this.getForms() } componentDidMount() { this.getForms() } render() { return ( <FormTable results={this.state.results} /> ) } }; class FormTable extends React.Component{ render() { return ( <table className="forms"> <thead> <tr> <th>Form Name</th> <th></th> <th style={{width: "40px"}}></th> </tr> </thead> {this.props.results.map(function(result) { return <FormItem key={result.Id} data={result} />; })} </table> ) } }; class FormItem extends React.Component{ render() { return ( <tbody> <tr className="form_row"> <td>{this.props.data.Name}</td> <td></td> </tr> {this.props.data.map(function(result) { return <FormTransaction key={result.Id} data={result} />; })} </tbody> ) } }; class FormTransaction extends React.Component{ render() { return ( <tr className="subform_row"> <td>{this.props.data.date}</td> <td></td> <td data-enhance="false"> <DeleteTransaction data={this.props.data.Id} /> </tr> ) } }; class DeleteTransaction extends React.Component { constructor(props) { super(props); this.state = {Id:props.data}; this.handleDelete = this.handleDelete.bind(this); } // deletes a sub row and calls get forms to re-render the whole react. handleDelete(event) { $.ajax({ url: server url + this.state.Id, type: 'DELETE', data: {}, dataType: 'json', success: function(result, status) { console.log(this); // need to call get forms here }, error: function(jqXHR, status, error) { console.log(jqXHR); } });*/ } render() { return( <i className="danger" onClick = {this.handleDelete}>X</i> ) } }; ReactDOM.render( (<FormList/>), document.getElementById('react-forms') ); 

Therefore, I need to call the getforms method after successfully deleting the handledelete method.

I'm pretty new to react as well as using es6. I tried decrypting the deletion of data into a list of forms and calling super.getForms. But that didn't work either. Any help is appreciated.

Answer 1

You can also pass a function from the parent component to the child component through the props child component, and then when you execute the function executed in the child component, you can simply call the passed function.

For instance:

 var ParentComponent = React.createClass({ update: function() { this.setState({somethingToUpdate: newValue}); console.log("updated!"); }, render: function() { <ChildComponent callBack={this.update} /> } }) var ChildComponent = React.createClass({ render: function() { <button onClick={this.props.callback}>click to update parent</button> } }) 

Answer 2

Whenever you try to call this.setState inside another function, it will not know that you are trying to set the state.

For example, in your code there is $ .get (... function (response) {... this.setState () ..}

Since this.setState is inside the function (answer) , this will point to the function (answer), not the root class.

So, you need to save this inside the variable right before calling $ .get.

var self = this; and inside the function do self.setState (...) instead of this.setState (..)

Hope this helps.