Call multiple functions in React, one inside and another outside a component?

Question

I have a trigger that is supposed to change a state of its child component. The results of both render statements are inconsequential. My only concern here is that I am unsure how to use the trigger trigger to call the leftbehind function without putting leftbehind inside its parent render Another.

My code is below. The goal is to have leftbehind run without having to put it inside the render.

var Another = React.createClass({
  leftbehind: function() {
    if (this.props.status === "dare") {
      alert('Winning!');
    }
  },
  render: function() {
    if (this.props.status === "truth") {
      return (<p>Yes</p>);
    } else {
      return (<p>Nope</p>);
    }
  }
});

var App = React.createClass({
  getInitialState:function() {
    return {deesfault: "truth"};
  },
  trigger: function() {
    this.setState({deesfault: "dare"});
  },
  render: function() {
    return (
      <div> 
        <p onClick={this.trigger}>{this.state.deesfault}</p>
        <Another status={this.state.deesfault}/>
      </div>
    );
  }
});

The reason I do not want to place leftbehind inside the render, is because it is technically supposed to take the place of an API call. And I do not want that to be called inside the render function.

Season · Accepted Answer · 2016-07-20 02:55:37Z

Your implementation executes leftbehind each time <Another> is rendering with its status prop being true. That said, once status is flipped to true, leftbehind will be executed over and over in every following rendering until it is flipped back to false. This will seriously cause problems.

Since the intention is to trigger leftbehind with a click event, I would restructure the components in different ways.

Move leftbehind into the parent component and have it executed along with the click event. If <Another> needs the results, passed them on through props.

var Another = React.createClass({
  render() {
    return <div>{this.props.params}</div>;
  }
});

var App = React.createClass({
  getInitialState() {
    return {apiRes: null};
  },
  onClick() {
    const res = someAPICall();
    this.setState({apiRes: res});
  },
  render() {
    return (
      <div>
        <p onClick={this.onClick}>Fire</p>
        <Another params={this.state.apiRes} />
      </div>
    );
  }
});

Or, move the <p> element into <Another> along with the click event.

var Another = React.createClass({
  getInitialState() {
    return {apiRes: null};
  },
  onClick() {
    var res = someAPICall();
    this.setState({apiRes: res});
  },
  render() {
    return (
      <div>
        <p onClick={this.onClick}>Fire</p>
        <div>{this.state.apiRes}</div>
      </div>
    );
  }
});

var App = function() { return <Another />; }

In the latter, the key logic is handled in the inner component. The outer one is just a container. In the former one, the outer component handles the logic and pass on the results if any. It depends on how the components relate with the API call to decide which suits better. Most importantly, in both cases the API will not execute unless the click event is triggered.

Collectives™ on Stack Overflow

Call multiple functions in React, one inside and another outside a component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related