На методы

Пусть в стейте хранится массив с юзерами. У каждого юзера есть имя, фамилия и возраст. Выведите всех юзеров на экран в виде таблицы. Пусть отображением юзера на экран занимается отдельный компонент.

Модифицируйте предыдущую задачу. Пусть у компонента-родителя есть метод showMessage, который алертом выводит '!'. Передайте этот метод в компонент-потомок. В таблице с юзерами сделайте еще одну колонку со ссылками. Привяжите к клику по этим ссылкам переданный метод.

Модифицируйте предыдущую задачу. Пусть теперь showMessage параметром принимает строку и выводит ее на экран. Сделайте так, чтобы по клику на ссылку выводилось имя соответствующего юзера.

Модифицируйте предыдущую задачу. Пусть теперь showMessage параметром принимает число и выводит его на экран. Сделайте так, чтобы по клику на ссылку на экран выводился номер юзера в массиве юзеров.

Модифицируйте предыдущую задачу. Поменяйте showMessage на deleteUser и сделайте так, чтобы по клику на ссылку юзер удалялся из таблицы.

На редактирование

Дан массив. Выведите его элементы в виде списка ul. Сделайте так, чтобы элементы массива выводились в отдельном компоненте. Рядом с текстом li сделайте ссылку 'редактировать'. По нажатию на эту ссылку она должна, а взамен должен появиться инпут, с помощью которого можно будет поредактировать текст li. По потери фокуса из инпута он должен исчезнуть, а взамен должна вернуться ссылка 'редактировать'.

Практика

Пусть в стейте хранится массив с продуктами. У каждого продукта есть название, цена и количество. Выведите все продукты на экран в виде таблицы. Сделайте так, чтобы в таблице была колонка, в которой выводится полная стоимость продукта (цена умножить на количество).

Пусть отображением продукта на экран занимается отдельный компонент. Сделайте так, чтобы рядом с каждым продуктом была кнопка 'удалить', с помощью которой можно удалить этот продукт из таблицы.

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

Модифицируйте предыдущую задачу так, чтобы под таблицей появился еще и один отдельный компонент, в котором будет выведена полная стоимость всех продуктов.

Модифицируйте предыдущую задачу так, чтобы в таблице появилась еще одна колонка, в которой будут находиться чекбоксы. Изначально эти чекбоксы отмечены. Сделайте так, чтобы полная стоимость всех продуктов выводилась только для тех продуктов, у которых чекбокс отмечен.