Insolation

1. Забудьте о таких подходах в React. Лишняя бесполезная сущность. Лучше вынести в отдельный модуль сами запросы к API.
2. Если используете голый API React, то это самый верный путь, так как при изменении state произойдет обновление компонента и его потомков.

import React, { Component } from 'react';
import { Child } from './Child';
import { getSomeData } from './api';

class Parent extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    getSomeData.then(data => this.setState({ data });
  }

  render() {
    return <Child data={this.state.data} />;
  }
}

Тыц
Более подробную информацию о том, что прочитали по ссылке уже ищите в Google. Подробно изучите подходы: feature-first, ducks pattern и почитайте о недостатках подхода file-type-first

Как я думал сделать:
По клику на deleteделать поля Name и Id visibility: none и в стейте сделать переменную isDeleted: true, если true то рендерить кнопку Restor'а, по клику на нее полям возвращать visibility.

Окей, делаем:

const ProductItem = ({ product, toggleRow }) => {
  return (
    <tr>
      <th>{product.deleted || product.id}</th>
      <td>{product.deleted || product.name}</td>
      <td>
        <button onClick={toggleRow}>
          {product.deleted ? 'Restore' : 'Delete'}
        </button>
      </td>
    </tr>
  );
};

class Products extends React.Component {
  state = {
    products: [ 'Apple', 'Peanut', 'Tomato', 'Cucumber', 'Banana', 'Lemon' ].map((n, i) => ({
      id: i + 1,
      name: n,
      deleted: false,
    })),
  }

  toggleRow(index) {
    this.setState(({ products }) => ({
      products: products.map((n, i) => i === index
        ? { ...n, deleted: !n.deleted }
        : n
      ),
    }));
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Product Name</th>
            <th>Delete / Restore</th>
          </tr>
        </thead>
        <tbody>
          {this.state.products.map((n, i) => (
            <ProductItem
              key={n.id}
              product={n}
              toggleRow={() => this.toggleRow(i)}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

Правда непонятно, при чём тут удаление? - данные-то на месте остаются, просто не отображаются.

Для тестового задания надо что-нибудь посложней. Простенький real world app.

Например простенький Weather App:
1. Строка поиска городов(можно использовать например API Google):
2. Результат поиска с погодой.
3. Список сохраненных городов.
4. Погода в текущей позиции.
Для погоды можно использовать API любого сервиса(например OWM API).
Такое приложение спроектировать сложней, тут помимо тупой работы с API библиотек придется проектировать.
Можно использовать роутинг, а можно обойтись и без него. Да и целый ряд задач, над решением которых новичку придется хорошо подумать:
1. Структура приложения
2. Работа с API
3. Реализация строки поиска
4. Обработка исключений( нет связи, отклонили использование геолокации)
5. Верстка
Когда такой проект начнет оживать и работать как задумано это, конечно, принесет человеку радость и уверенность в себе.

Так же можно реализовать Dashboard, но это посложней и требует серверной части или использование публичного тестового API вроде Star Wars API
Еще можно реализовать простенький клиент для любого сервиса. Например поиски и проигрывание видео c Youtube.

ИМХО совсем простые задачи, конечно могут показать знание API той или иной библиотеки, но обладает ли кандидат навыками необходимыми для Junior Developer они не отразят. А Junior Developer должен уметь самостоятельно решить точно поставленную задачу с пояснениями и рекомендациями по пути ее решения.

1. да
2. да
3. лучше сохранять в state данные, а мапить их уже в render

.filter / .splice

var cellsArray = [ ...document.querySelectorAll('td') ];
var listener = e => document.getElementById('output').innerHTML = cellsArray.indexOf(e.target); // Создать элемент вывода надо заранее

cellsArray.forEach( cell => cell.addEventListener( 'click', listener ) );

Изучайте React. Приложения на ванильном JS писать не надо, не повторяйте ошибки разработчиков из 2014 года.

типа такое?
https://jsfiddle.net/ka11s6m5/

Как то так