функция, переданная как React, не появляется в вызываемом дочернем

Question

У меня есть метод рендеринга компонента React, определенный ниже, который включает передачу подпрограммы onExchangeSelect в компонент ExchangeList.

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
            exchanges={this.state.exchanges} selected={this.state.selectedExchange}
            onExchangeSelect={selectedExchange => this.setState({selectedExchange})}
        />
        <ExchangeDetail exchange={this.state.selectedExchange} />
      </div>
    );
  }

Затем в конструкторе ExchangeList, когда я console.log this.props, нет опоры с именем onExchangeSelect, которую я могу вызвать, и т.

Цель состоит в том, чтобы передать функцию обратного вызова от компонента верхнего уровня к дочернему компоненту, который будет вызываться дочерним элементом, чтобы влиять насостояние родительского компонента.Весь класс верхнего уровня приведен ниже:

class ExchangeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      exchanges:[
        {
          name:"binance",
          url:"https://bittrex.com"
        },
        {
          name:"bittrex",
          url:"https://bittrex.com"
        }
      ],
      selectedExchange:"binance"
    };

  }

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
            exchanges={this.state.exchanges} selected={this.state.selectedExchange}
            onExchangeSelect={selectedExchange => this.setState({selectedExchange})}
        />
        <ExchangeDetail exchange={this.state.selectedExchange} />
      </div>
    );
  }
}

Почему функция недоступна в качестве опоры в дочернем компоненте?(ниже):

class ExchangeList extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };

    console.log('This props ' + JSON.stringify(this.props))
  }

  render() {
    console.log("EL: " + JSON.stringify(this.props))

      const ExItemList = this.props.exchanges.map((exchange) => {
        return  <ExchangeListItem key={exchange.name} exchange={exchange}
                                  onExchangeSelect={this.props.onExchangeSelect}/>
      });


    return (
      <ul className="col-md-4 list-group bg-light" >
        {ExItemList}
      </ul>

    );
  }
}

Answer 1

Я бы проверял их в инструментах разработчика вместо console.log..поместил точку останова и проверял в инструменте chrome dev .. onExchangeSelect должен быть доступен как часть реквизитов в дочернем компоненте ..