Забрать значение из блока.React

Создадим функцию и назовем ее addValueToArray, она будет навешиваться на все дивы, которые содержат описание, которое нужно достать при клике и сохранить. Значения будем хранить в массиве values в стейте компонента. При сохранении знового значения в стейт использовал spread syntax, чтобы не вызвать мутацию стейта, что может привести к сайд эффекту.

Через currentTarget - получить элемент, в котором в данный момент обрабатывается событие, а через textContent - получить текстовое содержимое элемента и его потомков. Проверка черех indexOf добавлена, чтобы уже существующие значения в массиве не попали в него снова.

Рабочий пример кода:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: []
    };
    this.addValueToArray = this.addValueToArray.bind(this);
  }
  addValueToArray(e) {
    const { textContent } = e.currentTarget;
    const { values } = this.state;
    if (values.indexOf(textContent) === -1) {
      this.setState({
        values: [...this.state.values, textContent]
      });
    }
  }
  render() {
    return (
      <div>
        <h1>Врачи</h1>
        <div onClick={this.addValueToArray}>
          <h5>хирург</h5>
        </div>
        <div onClick={this.addValueToArray}>
          <h5>терапевт</h5>
        </div>
        <div onClick={this.addValueToArray}>
          <h5>кардиолог</h5>
        </div>
        <div>
          <h4>Кто был выбран?</h4>
          <ul>
            {this.state.values.map((value, index) => (
              <li key={index}>{value}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

Результат:

Полезные ссылки:

• Event.currentTarget
• Node.textContent
• Spread syntax
• Array.prototype.indexOf()
• Array.prototype.map()