Как из дочернего элемента передать id элемента по которому кликнули в React?

Question

[Николай Семенов]

Ребятушки всем привет! Помогите пожалуйста
есть компонент

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class ColumnButton extends Component {
  static propTypes = {
    column: PropTypes.object.isRequired,
    toggleColumn: PropTypes.func.isRequired
  };

  onClickHandler = () => {
    console.log(this.props.column.id)
    this.props.toggleColumn(this.props.column.id);
  }

  render () {
    const { column } = this.props;

    return (
      <button
        turnOff={column.turnOff}
        onClick={this.onClickHandler}
      >
        {column.title}
      </button>
  
    )
  }
}

export default ColumnButton

вот родительский коспонент

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ColumnButton from './ColumnButton'

class ColumnsPanel extends Component {
  static propTypes = {
    columns: PropTypes.object.isRequired,
    itemAdded: PropTypes.func.isRequired
  };
  render () {
    const controlPanel = Object.keys(this.props.columns.items).map(itemKey => {
      const column = this.props.columns.items[itemKey];
      return (
        <ColumnButton 
          key={itemKey} 
          column={column}
          toggleColumn={this.props.itemAdded}
        />
      )
    })
    return (
      <div>{controlPanel}</div>
    )
  }
}

export default ColumnsPanel

почему this.props.column.id не передается в родительский

Answer 1

[Антон Спирин]

По-хорошему надо хандлер передавать в кнопку, а не реализовывать в ней. Исправьте на:

class ColumnsPanel extends Component {
  ...
  handleColumnButtonClick = e => {
    ...
  };
  ...
  render() {
   ...
   return(
     <ColumnButton
       onClick={this.handleColumnButtonClick}
     />
    ...
   )
  }
}

Тогда вам не придется передавать в кнопку, то о чем ей совсем не надо знать.
Кнопка для клика и вызова переданного ей хандлера. Больше она ничего делать не должна.

Почитайте о принципах SOLID