TimraWork

// Создадим компонент ROW c jsx-разметкой
const Row = ({ left, right }) => {
	return (
		<Grid container spacing={3}>
			<Grid item xl={8} md={9}>
				{left}
				<Pager />
			</Grid>
			<Grid item xl={4} md={3}>
				{right}

TimraWork

// app.js
<Posts renderItem={ ({ title, date }) => `${title} <span class="date">(${date})</span>` }/>

//posts.js
return items.map((item) => {
  
			const { id } = item;
			const label = this.props.renderItem(item);

			return (

TimraWork

// posts.js
componentDidMount() {
	this.SwapiService.getPosts() // Функция Меняется - остальное не меняется при переиспользовании
}

// +++++++++++++++ Преобразование функции ++++++++++++++
// В app.js 
import SwapiService from '../swapi-service';
export default class App extends Component {
	swapiService = new SwapiService();

TimraWork

async getPosts() {
  //...
}

getPosts = async () => {
  //...
}

TimraWork

	componentDidUpdate(prevProps) {
		if (this.props.postId !== prevProps.postId) {
			this.updatePost();
		}
	}

TimraWork

componentDidMount() {
	this.updatePost();
}

componentDidUpdate(prevProps, prevState) {
	console.log('componentWillUnmount()');
}

componentWillUnmount() {
	console.log('componentWillUnmount()');

TimraWork

export default class App extends Component {

	state = {
		showPost: true,
	};	

  onTogglePost = () => {
      this.setState(({ showPost }) => {
        return {
          showPost: !showPost,

TimraWork

Math.random() // от 0 - 1 (1 не включительно)  - число float (с плавающей точкой)

Math.random()*25 // от 0 - 24 (дробные)

// Math.floor() - округление вниз

Math.floor(Math.random()*25) // от 0 - 25 (целые) 

Math.floor(Math.random()*25) + 3 // от 0 - 28 (начиная с 2)

TimraWork

// Шаг1 — создать компонент-функцию для вывода ошибок
// Файл components/error.js

const Error = () => {
	return (
		<div className="error">
			Произошла ошибка. <br /> Попробуйте обновить страницу.
		</div>
	);
};

TimraWork

// Прелоадер для компонента
export default class Post extends Component {
	SwapiService = new SwapiService();

	state = {
		post: {},
		loading: true,
	};

	onPostLoaded = (post) => {