React.js - How to execute function in parent with arguments from child

Question

The question is probably rather unclear, but i did not how to formulate it, maybe that was the reason why i was not able to find solution to this puzzle i have. anyway, here is an example of what i want to accomplish:

<Calendar
      tileContent={({ activeStartDate, date, view }) =>
        this.renderGames(date, view)
      }
    />

This is an example from npm package react-calendar, but i am sure you know what i mean. The param tileContent gets passed function that already has destructured object, and then i run my own function with data i get from that function.

I was thinking that this was done by executing function in child where i would pass an object (or single param, i just use object as an example).

Does this answer your question? [React - Call parent method in child component](https://stackoverflow.com/questions/40109698/react-call-parent-method-in-child-component) — g.d.d.c, Dec 24 '19 at 18:35

score 1 · Answer 1 · edited Jun 17 '20 at 08:44

It sounds like you want to execute a function that's in the parent component, from a child component with arguments passed from the child.

Here is an example:

    const ParentComponent = () => {

      const handleClick = (args) => {
         console.log(args)
      }


      return (
         <div>
            <ChildComponent onClick={handleClick} />
         </div>

      )

}

const ChildComponent = ({onClick}) => {
   const val = 5;


   return (
      <div>
         <button onClick={() => handleClick(val)} name="Click">Click Me</button>
      </div>
   )
}

This hsould render the child component which is just a button, with an event handler that is sent from the parent. When you click the button, you should get a console log of 5, which is coming from the parent. This is how you would propgate values from the child, up to the parent.

That was almost what i was looking for, @Matt Oestreich provided more detailed answer, but thanks anyway! — pho7on, Dec 24 '19 at 19:09

score 1 · Accepted Answer · answered Dec 24 '19 at 19:03

I think what you're looking for are Render Props, not just executing function in parent with args (even though render props do this as well). It would appear your example is using Render Props specifically.

There are some good examples online of using render props in React, also referred to as "Wrapper Components", etc..

An example could be something like:

const { render } = ReactDOM;

class CounterWrapper extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    const { count } = this.state;
    return this.setState({ count: count + 1 });
  };

  decrement = () => {
    const { count } = this.state;
    return this.setState({ count: count - 1 });
  };

  render() {
    const { count } = this.state;
    return (
      <React.Fragment>
        {this.props.wrapperContent({
          increment: this.increment,
          decrement: this.decrement,
          count
        })}
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  renderApp = (cnt, inc, dec) => {
    return (
      <div>
          <h1>Render Props Counter Example</h1>
          <div>
            <p>{cnt}</p>
            <button type="button" onClick={() => inc()}>
              Increment
            </button>
            <button type="button" onClick={() => dec()}>
              Decrement
            </button>
          </div>
        </div>
    )
  };

  render() {
    return (
      <CounterWrapper 
        wrapperContent={({ count, increment, decrement }) => 
          this.renderApp(count, increment, decrement)
        } 
      />
    );
  }
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

React.js - How to execute function in parent with arguments from child

2 Answers2