Дак а ты из старых или новый какой то?))

ну ладно, удачи

Дак а ты из старых или новый какой то?))

Новый-новый. Учусь

А я думал мистер

Ну ладно вэлкам

Спрашивай не стесняйся

Благодарю

Мы тут токсиков не держим 😆

нифига вы тут развели)

так ладно) Не буду начинать) Отвечу просто) Посмотри еще раз что такое state и как с ним работают. Все изменения стейта происходят через setState В onclick прописан метод. Почему стрелочный? Потому что тебе нужно прокинуть объект movies. Без стрелочной функции ты не сможешь его прокинуть в какую-либо функцию. Тут работает одновременно замыкание и получение контекста выполнения от родителя. Т.е. создать такую анонимную функцию ты можешь получить доступ к объекту выше (т.е. movies)

При нажатии на кнопку отработает метод с уже зафиксированным объектом в функции. Т.е. в момент отрисовки компонента у тебя фиксируется конкретный объект с которым функция вызывается)

окончательно запутал?)))

Завтра возьму лист А4 для списка вопросов 😱

А всё прочитал сейчас на свежую голову стало понятно 😆

привет

Этот бот всем в лс наспамил?

Этот бот всем в лс наспамил?

Неа

Ато как то странно зашёл вышел и бдыщ спам

Я думал запарсил контакты всех из чата

А всё прочитал сейчас на свежую голову стало понятно 😆

А что ты делал то?

Курс по реакту тереблю))

Вот некоторые моменты были непонятны

Мне кстати удалось скачать монго

кароч затык среактом

import React, { Component } from 'react'; import Header from './header'; class Headers extends Component { state = { headers: [ {id: 1, value: 10}, {id: 2, value: 0}, {id: 3, value: 0}, {id: 4, value: 0}, {id: 5, value: 0}, ] }; handleDelete = (headerId) => { // const headers = this.state.headers.filter(c => c.id !== headerId); // this.setState({headers: headers}); console.log('Event prop!', headerId) } render() { return ( <div> {this.state.headers.map(header => <Header key={header.id} onDelete={this.handleDelete} value={header.value}> <h4>Header #{header.id}</h4> </Header>)} </div> ); } } export default Headers;

это родитель

import React, { Component } from 'react'; class Header extends Component { state = { id: this.props.id, value: this.props.value } handleIncrement = () => { this.setState({ value: this.state.value + 1 }); }; render(){ return( <div> {this.props.children} <span className={this.getBadgeClass()}><h3>A component of list {this.formatCount()}</h3></span><button onClick={this.handleIncrement} className="btn btn-secondary btn-sm tButton" >Click</button> <button onClick={() => this.props.onDelete(this.props.id)} className="btn btn-danger btn-sm tButton" >Delete</button> </div> ) } getBadgeClass(){ let classes = 'badge bg-'; classes += this.state.value === 0 ? "warning" : "primary"; return classes //динамик класс подстановка по условию } formatCount() { const { value } = this.state; return value === 0 ? "Not clicked" : value + " times clicked"; } } export default Header

а это компонент с кнопки которого надо получить id из state родителяв консоль

id получается undefined

перепроверил несколько раз уже мозг кипит

Лошпеды в реакт чате обругали классы и забыковали))

Токсики сука

причем функция в родителе срабатывает но id undefined

Так ты же не передаешь id в дочерний

А че за таймер на сообщения в 10 сек?

Нах он нужен

Блин, на сколько же функциональные проще, чем классовые читаются, офигеть

А че за таймер на сообщения в 10 сек?

думал вдруг спамеры атакуют ) убрать?

Ну будут каждые 10 сек спамить 🤭

то есть в родителе надо написать this.props.id где то? ))

Добавляешь id={header.id}

урааа спасибо ))

<Header key={header.id} id={header.id} onDelete={this.handleDelete} value={header.value}>

то есть это все замаскированные пропсы? ))

id, onDelete, value

ихха и удаление тоже заработало!

магия реакта!!!

Так они не замаскированные, ты их сам передаешь 😅

Так я видео на ютубе смотрел там так и пишут this.props.id

Чето такое

Ну это в дочернем

Спасибо!

такс еще вопросец )

import React, { Component } from 'react'; import Header from './header'; class Headers extends Component { state = { headers: [ {id: 1, value: 10}, {id: 2, value: 0}, {id: 3, value: 0}, {id: 4, value: 0}, {id: 5, value: 0}, ] }; handleDelete = (headerId) => { const headers = this.state.headers.filter(c => c.id !== headerId); this.setState({headers: headers}); console.log('Event prop!', headerId) } render() { return ( <div> {this.state.headers.map(header => <Header key={header.id} header={header} onDelete={this.handleDelete} value={header.value}> <h4>Header #{header.id}</h4> </Header>)} </div> ); } } export default Headers;

увидел в курсе что чтоб не делать кучу пропсов можно сделать header={header}

получается доступ ко всем пропсам header?

а сам header получаем из метода map() т к создается новый массив?

правильно понимаю?

Нет, ты просто все пропсы в объект складываешь. Либо в функцию. Но это плохая практика

Там реактивность внутри объекта теряется

Работает, только если полностью объект пересоздавать при изменении атрибутов

Mosh Hamedani злодей! Что за курсы делает 😈😃

Нет, ты просто все пропсы в объект складываешь. Либо в функцию. Но это плохая практика

а хорошая какая?

Если без лишних библиотек, тогда пропсы)

не понял

отдельно каждый делать?

Если не нужно отслеживать внутреннюю структуру headers, тогда можно и так

отдельно каждый делать?

Да)

id={header.id} value={header.value} ?

Так, я понял. Тут вопрос не правильно задан

В компонент в примере передается массив хедеров

Далее ты с ним работаешь и пропихиваешь отдельный хедер внутрь другого компонента

Там все правильно