Антон Спирин

Судя по примеру в репозитории библиотеки, ExcelSheet является свойством ExcelFile и не экспортируется из модуля напрямую.

import ReactExport from "react-data-export";

const { ExcelFile } = ReactExport;
const { ExcelSheet } = ExcelFile;

Либо не экспортируете Form.

Задача. По нажатию на кнопки A и B добавлять буквы a и b в значение element. Варианты решения.
1. Написать для каждой кнопки свой хандлер:

function handleClickA() {
  element.innerHTML += 'a';
}

function handleClickB() {
  element.innerHTML += 'a';
}

a.addEventListener('click', hanldeClickA);
b.addEventListener('click', hanldeClickB);

Главная проблема подобных решений дублирование кода. Букв 26/33, еще цифры и спец символы.

Решение 2. Написать билдер:

function buildHandler(char) {
  return function() {
    element.innerHTML += char;
  }
}

a.addEventListener('click', buildHandler(a.innerHTML));
b.addEventListener('click', buildHandler(b.innerHTML));

С подобными билдерами очень удобно работать в цикле:

for (let key in keys) {
  key.addEventListener('click', buildHandler(key.innerHTML);
}

Почему именно нужен return function() (не просто return)?

addEventListener принимает вторым аргументом функцию, именно ее функция билдер и возвращает.

Можно создать билдер и передавать нужные параметры.

Стараться не использовать прямые обращения к элементам DOM в React разработке и использовать состояние компонента.

const Grid extends React.Component {
  state = { itemsSize: 'sm' };

  handleChangeSize = () => { /* some code */ };  

  render() {
    const { itemSize } = this.state;
    const { items } = this.props;

    return (
      <Wrapper>
        <ControlPanel onChangeSize={this.handleChangeSize} />
        {items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
      </Wrapper>
    );
  }
}

class ExampleComponent extends React.Component {
  state = {
    isReady: false,
  };
  
  hanldeOnLoad = () => {
    this.setState({ isReady: true });
  };
  
  render() {
    const { src } = this.props;
    const { isReady } = this.state;
 
    const className = isReady ? '' : 'some-class';
 
    return (
      <div className={className}>
        <img onLoad={this.hanldeOnLoad} src={src} />
      </div>
    );
  }
}

1. Frontend Developer Roadmap
2. Покинуть родное село, чем раньше, тем лучше. Если сильно связаны с этим местом, то можно будет вернуться через пару лет.

В компоненте App отсутствует метод NewTask, к которому вы пытаетесь обращаться в конструкторе.

В компонент Button пробросьте onClick:

class Button extends React.Component {
  render () {
    const { text, onClick } = this.props;

    return <StyledButton onClick={onClick}>{text}</StyledButton>;
  }
}

Искользовать Middleware. Есть очень простая и популярная библиотека redux-thunk.
Статья на эту тему.

Никак.

Для вашей конкретной задачи хорошо подойдет StyledComopоnents:

const hiddenSyle = props => props.hidden && css`
  display: none; 
`;

const disabledStyle = props => props.disabled && css`
  pointer-events: none;
  opacity: 0.3;  
`;

const Input = styled.input`
  ${hiddenStyle}
  ${disabledStyle}
`;

Ну и почитайте про Recompose и Hooks Api

1. Ваши реализации выполняют не массив Promise, а массив вызовов:

function(done) {
  setTimeout(function() {
    done('result');
  }, duration);
};

Скорей всего, вам надо было выполнять таски вида:

new Promise(resolve => { 
  setTimeout(resolve, duration, 'result'); 
});

2. Называйте функции и аргументы по-человечески, а не array, newArray, funcArray.

3. Для параллельного выполнения с вызовом колбека done, достаточно:

function all(promises, done) {
  const results = [];
  let count = promises.length;
  const checkDone = () => {
    if (--count === 0) done(results);
  };
  
  promises.forEach((p, i) => {
    p.then(x => results[i] = x).then(checkDone);
  });
}

Для имитации Promise.all:

function promiseAll(promises) {
  return new Promise(resolve => {
    const results = [];
    let count = promises.length;
    const checkDone = () => {
      if (--count === 0) resolve(results);
    };
  
    promises.forEach((p, i) => {
      p.then(x => results[i] = x).then(checkDone);
    });
  });
}

Реализацию последовательного выполнения прикладывать не буду, так как ее ну слишком просто найти в поисковике.

Lifting State Up

1. В вашем случае нет, вам же, насколько я понимаю, нужна навигация без перезагрузки страницы.
2. Забудьте на время разработки что такое JQuery и подходы которые с ним принято использовать. По поводу библиотек, экосистема react содержит множество библиотек. Так же есть смыл подключить библиотеку для ajax запросов axios/superagent/etc. Вообще, перед тем как подключать какую-либо библиотеку лучше 3 раза подумать, так как многие из них существенно увеличивают размер бандла, например, тот же moment. Для того чтобы быть в курсе того, что и сколько в вашем бандле занимает места можно подключить в prod сборку webpack-bundle-analyzer.
3. Почитайте про роутинг на стороне клиента. Для React разработки стандарт react-router.
4. SSR.

1. Преобразовываем значение к типу number
2. Вам в прошлом вашем вопросе в комментарии к ответу писали, что у массива так реализован метод toString