TimraWork

state = {
		post: {},
		loading: true, // 1. Добавим в стейт
};

onPostLoaded = (post) => {
  this.setState({
    post,
    loading: false, // 2. После загрузки постов обновим стейт
  });

TimraWork

const str = 'https://swapi.co/api/planets/12/'; // искомая строка
const id = str.match( /\/([0-9]*)\/$/ )[1]; 
console.log(id); // 12

TimraWork

// swapi-service.js
export default class SwapiService {
	_apiBase = 'https://timra.ru/timra/wp-json/wp/v2';

	async getResource(url) {
		const res = await fetch(`${this._apiBase}${url}`);
		return await res.json();
	}

	getAllPosts() {

TimraWork

<div dangerouslySetInnerHTML = {{ __html: excerpt }} ></div>

TimraWork

const getResource = async (url) => {
	const res = await fetch(url);

	if (!res.ok) {
		throw new Error(`Could not fetch ${url}` + `, received ${res.status}`); //Could not fetch Error: Could not fetch https://swapi.dev/api/people/1asdfasdfdas/, received 404
    at getResource (index.js:5)
	}

	const body = await res.json();
	return body;

TimraWork

//ф-я js fetch 
const getResource = async (url) => {
	const res = await fetch(url);
	const body = await res.json();
	return body;
};

getResource('https://swapi.dev/api/people/1/').then((body) => {
	console.log(body); // Результат {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}
});

TimraWork

// let clazz = 'btn';
// if (el.name === filtered) {
// 	clazz = 'btn btn-info';
// } else {
// 	clazz = 'btn btn-outline-secondary';
// }

const clazzs = filtered === el.name ? 'btn-info' : 'btn-outline-secondary';
<button className={`btn ${clazzs}`} > {el.label} </button>

TimraWork

buttons = [
  { name: 'all', label: 'All' },
  { name: 'active', label: 'Active' },
  { name: 'done', label: 'Done' },
];

render() {
		const elements = this.buttons.map((el) => {  
			return <button key={el.name}>{el.name}</button>;
		});

TimraWork

// item-status-filter.js
<button onClick={() => this.props.onFilter('all')} >    All </button>
<button onClick={() => this.props.onFilter('done')} >   Active </button>
<button onClick={() => this.props.onFilter('active')}>  Done </button>

// app.js
state = {
	todoData: [
		{ label: 'NOT DONE1', important: false, done: false, id: 1 },
		{ label: 'NOT DONE2', important: false, done: false, id: 2 }

TimraWork

// компонент ребенок search-panel.js - должен передать текст поиска, который мы вводим в инпут
<input type="text" onChange={(e) => this.props.onFilter(e.target.value.trim())} />
  
// app.js - родитель
state = {
  todoData: [
    ...
  ],
  query: '',
};