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

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

На стейты

Дан следующий стейт: 

this.state = {name: 'Иван', age: 25};

Сделайте так, чтобы метод render вывел на экран следующее ('Иван' и 25 должны взяться из стейта): 

<div>
	имя: Иван, возраст: 25
</div>

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {name: 'Иван', age: 25};
	}

	render() {
		return <div>
			имя: {this.state.name}, возраст: {this.state.age}
		</div>;
	}
}

На события

Сделайте кнопочку, по нажатию на которую сработает метод showMessage и на экран алертом выведется сообщение с текстом 'hello'.

Решение: 

class App extends React.Component {
	showMessage() {
		alert('hello');
	}

	render() {
		return <button onClick={this.showMessage}>
			нажми на меня
		</button>;
	}
}

Дан следующий стейт: 

this.state = {name: 'Иван', age: 25};

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

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {name: 'Иван', age: 25};
	}

	showName() {
		alert(this.state.name);
	}

	render() {
		return <button onClick={this.showName.bind(this)}>
			нажми на меня
		</button>;
	}
}

На setState

Дан следующий стейт: 

this.state = {name: 'Иван', age: 25};

Изначально метод render выводит на экран следующее: 

<div>
	имя: Иван, возраст: 25
</div>

Сделайте кнопочку, по нажатию на которую 'Иван' поменяется на 'Коля', а 25 поменяется на 30.

Решение: 

class App extends React.Component {
	constructor() {
		super();
		this.state = {name: 'Иван', age: 25};
	}

	changeUser() {
		this.setState({name: 'Коля', age: 30});
	}

	render() {
		return <div>
			<p>имя: {this.state.name}, возраст: {this.state.age}</p>
			<button onClick={this.changeUser.bind(this)}>
				нажми на меня
			</button>
		</div>
	}
}