Только толкая один элемент в массив

Две вещи: setState является асинхронным, поэтому на следующей строке вы можете получить или не получить последнее значение, поэтому я рекомендую изменить

clickHandler = () => {
    this.setState({active: !this.state.active})
    this.props.getSelection(this.state.active)
  }

на

clickHandler = () => {
   this.setState({active: !this.state.active}, () => {
      this.props.getSelection(this.state.active)
   })
}

Второй Аргументом для setState является функция обратного вызова, которая будет выполнена сразу после завершения setState.

Во-вторых, на getSelection вы каждый раз определяете новый массив, поэтому он не будет иметь значений из предыдущего запуска. Вы должны хранить это где-нибудь.

Здесь есть 2 проблемы:

1. arr является локальной переменной. Это не сохраняет предыдущий результат onClick.

2. setState - это асинхронное событие. Согласно документации :

   setState () не всегда сразу обновляет компонент.

   setState((state, props) => {}, () => { /*callback */}) следует использовать.

class Box extends React.Component {
  state = {
    active: false
  };

  clickHandler = () => {
    this.setState(
      state => ({ active: !state.active }),
      () => {
        this.props.getSelection(this.state.active);
      }
    );
  };

  render() {
    const { children } = this.props;
    return (
      <button
        style={{ ...style.box, background: this.state.active ? "green" : "" }}
        onClick={this.clickHandler}
      >
        {children}
      </button>
    );
  }
}

Небольшое примечание:

Значение key отсутствует в дочернем компоненте this.props, поэтому вам не нужно его передавать, но это не повлияет на результат.

В компоненте App давайте создадим массив на уровне класса для отображения:

class App extends React.Component {
  state = {
    needsOptions: ["Birthday", "Christmas", "School achievement"]
  };

  arr = [];

  getSelection = val => {
    this.arr.push(val);
    console.log(this.arr);
  };
}

CodePen здесь