Reactで親から子に関数を渡したい

Reactで親から子に関数を引数付きで渡す方法を模索しています。
Propで普通に渡すと以下のように、子コンポーネントでボタンを押していないのにonClickが呼ばれてしまいます。

javasctipt
1import React, { Component } from 'react';
2import _ from 'lodash';
3import './App.css';
4
5const numList = [1,2,3,4];
6
7//　子コンポーネント
8class Child extends Component {
9  render(){
10    console.log("Childが呼ばれた")
11    return (
12      <button onClick={this.props.passFunc}>子コンポーネントです</button>
13    )
14  }
15}
16
17//　親コンポーネント
18export class Parent extends Component {
19  
20  testFunc(num){
21    console.log(`${num}回目のtestFuncが呼ばれた`)
22  }
23
24  renderChild(){
25    console.log("renderChildが呼ばれた")
26    return _.map(numList, num => {
27      return <li key={num}><Child passFunc={this.testFunc(num)} /></li>
28    })
29      
30    
31  }
32
33  render(){
34    return(
35      <div>
36        <p>親コンポーネントです</p>
37        <ul>
38          {this.renderChild()}
39        </ul>
40      </div>
41    )
42  }
43}
44
45// ========================================
46
47export default Parent;
48

どうすれば1行の目がボタンが押されたタイミングで"1回目のボタンが押された"と表示できるのでしょうか。

よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

解決しました。
公式サイトに乗っていました。
公式サイト

以下コードです。

javascript
1renderChild(){
2    console.log("renderChildが呼ばれた")
3    return _.map(numList, num => {
4      // passFunc={() => this.testFunc(num)} || passFunc={this.testFunc.bind(this,num)} でうまくいく
5      return <li key={num}><Child passFunc={() => this.testFunc(num)} /></li>
6    })
7  }