Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Пусть в стейте дан массив имен ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']. Выведите каждый элемент этого массива в отдельной <li> в списке ul.

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {items: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']};
	}

	render() {
		const list = this.state.items.map((item, index) => {
			return <li key={index}>{item}</li>;
		});

		return <ul>
			{list}
		</ul>
	}
}

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

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {items: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']};
	}

	//Добавляем в конец списка новый пункт:
	addItem() {
		this.state.items.push('пункт');
		this.setState({items: this.state.items});
	}

	render() {

		//Формируем набор из тегов li:
		const list = this.state.items.map((item, index) => {
			return <li key={index}>{item}</li>;
		});

		//Привязываем к кнопке метод addItem:
		return (
			<div>
				<ul>
					{list}
				</ul>
				<button onClick={this.addItem.bind(this)}>добавить</button>
			</div>
		);
	}
}

Переделайте предыдущую задачу так, чтобы появилась кнопочка, по нажатию на которую каждый раз будет исчезать последняя li из списка (каждый раз по одной, пока li в списке не закончатся).

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {items: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']};
	}

	//Удаляем последний элемент:
	deleteItem() {
		this.setState({items: this.state.items.slice(0, -1)});
	}

	render() {
		const list = this.state.items.map((item, index) => {
			return <li key={index}>{item}</li>;
		});

		return (
			<div>
				<ul>
					{list}
				</ul>
				<button onClick={this.deleteItem.bind(this)}>удалить</button>
			</div>
		);
	}
}

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

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {items: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима']};
	}

	//Удаляем заданный элемент:
	deleteItem(index) {
		this.state.items.splice(index, 1);
		this.setState({items: this.state.items});
	}

	render() {

		//Формируем набор из тегов li:
		const list = this.state.items.map((item, index) => {
			return <li key={index}>
				{item}
				<button onClick={this.deleteItem.bind(this, index)}>
					удалить
				</button>
			</li>;
		});

		return <ul>
			{list}
		</ul>
	}
}