Почему не вешается обработчик на react компонент?
А с чего вы взяли что он там должен быть? Вам, думаю, стоит подтянуть основы JavaScript.
Если используете синтаксис ES6, используйте импорты и экспорты:import React from 'react';export default Task;
Хандлеры лучше биндить не в render, а в конструкторе:constructor(props) {
  super(props);

  this.state = {
    isOpened: false,
  };

  this.clickHandler = this.clickHandler.bind(this);
}
Или определяйте хандлер как class field arrow function:clickHandler = e => {
  // your stuff
};
Такая функция привязана к контексту экземпляра и биндить ее не надо.create-react-app поддерживает такой синтаксис из коробки.
Нельзя передавать текущее состояние в метод setState, так как это асинхронный метод, к моменту вызова состояние может успеть измениться и будет использовано старое значение. Чтобы обновить состояние на основе предыдущего передавайте в setState функцию возвращающую объект. При вызове, первым аргументом в нее придет актуальное состояние на момент обновления:this.setState(prevState => ({
  isOpened: !prevState.isOpened,
}));
Вместо var используйте const для неизменяемых значений и let для изменяемых.
Наконец, следите за чистотой кода. Вот хорошие гайдлайны от Airbnb:Гайдлайн Airbnb по JavaScriptГайдлайн Airbnb по React
При рендеренге на  сервере, к клиенту приходит обычный html, который ничего не знает про обработчики. Чтобы это исправить, надо к странице, которую отправляешь, написать тэг script, который содержит код прикрепления компонентов, как если бы рендерили на клиенте.