понял

import React from 'react'; import i from './Input.module.css'; import * as axios from "axios"; let Input =(props)=>{ let newNameElement=React.createRef(); let newMessageElement=React.createRef(); let onNameChange=()=> { let text = newNameElement.current.value; props.updateNewNameText(text); } let onMessageChange=()=> { let post = newMessageElement.current.value; props.updateNewPostText(post); } let onAddMessage=()=>{ axios.post('http://chat.solobut.ru:4000/business/add',{ name:props.name, message:props.message }).then(response =>props.addMessage(response.data) ) } return( <div className={i.Input}> {/*<form onSubmit={onSubmit}>*/} <input type={i.text} onChange={onNameChange} ref={newNameElement} placeholder={props.name} /> <input type={i.text} onChange={onMessageChange} ref={newMessageElement} placeholder={props.message} /> <button onClick={onAddMessage}>Send</button> {/*<input type="submit" value="Register Business" className="btn btn-primary"/> </form>*/} </div> ) } export default Input /*const Input =(props)=>{ let newMessageElement=React.createRef(); let newNameElement=React.createRef(); let onAddMessage=()=>{ props.addMessage(); } let onNameChange=()=>{ let text = newNameElement.current.value; props.updateNewNameText(text); } let onMessageChange=()=>{ let text = newMessageElement.current.value; props.updateNewPostText(text); } return( <div className={i.Input}> <form> <input type={i.text} onChange={onNameChange} ref={newNameElement} value={props.newNameText} /> <input type={i.text} onChange={onMessageChange} ref={newMessageElement} value={props.newPostText} /> <button onClick={onAddMessage}>Send</button> </form> </div> ) } export default Input*/

onAddMessage={this.onAddMessage}/>

вот так работает все отлично

передай onAddMessage={this.onAddMessage}/>

в интуп

ты передаёь onAddMessage={this.props.onAddMessage}/>

this в функциональной компоненте нет

в классе

она только в классовой

return ( <Input updateNewPostText={this.props.updateNewPostText} updateNewNameText={this.props.updateNewNameText} addMessage={this.props.addMessage} name={this.props.name} message={this.props.message} onAddMessage={this.onAddMessage}/> )

в контейнере

понял

Чо у тебя в итоге?

так помогло но не совсем)

нода на экспрессе?

или коа

ты логику в компоненту вернул

логика - в контейнер, компонента - отрисовка

да

почему то 2 раза заносится сообщение

первый раз то которое я ввел, а второе по дефолту

а ты в него вставил обращение к серверу: let onAddMessage=()=>{ axios.post('http://chat.solobut.ru:4000/business/add',{ name:props.name, message:props.message }).then(response =>props.addMessage(response.data) ) }

ты же в componentDidMount вызываешь

в смысле в компоненту

а надо в конструкторе?

Класс (содержит логику) передает методы и данные в компоненту, которая отрисовывает все на основе переданных данных и вызывает методы класса по действиям (онКлик)

onAddMessage - метод должен быть в классе и передаваться в компоненту пропсой, а в компоненте вызываться просто по клику

у меня сейчас после перезагрузки компоненты заносится сообщение по дефолту

почему это происходит?

ты это делаешь в componentDidMount

componentDidMount() { this.onAddMessage() }

вызываешь метод с запросом

ага

да убери его

этого не надо

в componentDidMount делают обычно запросы на получение данных

все понял спасибо)

все было бонально из за onAddMessage={this.onAddMessage}/>

просто если метод объявлен в самой компоненте props не надо писать

А ты догадливый

нет 3 часа на это потратил)

по видео смотришь все понятно)

а пока сам не сделаешь не отлаживается в уме) спасибо

по поводу axios post проблема с follow/unfollow выдавал 401 ошибку unauthorized

через xmlhttpreq работает

может кому полезно будет

Фетч используй

./src/components/posts/AddPost.jsx Line 12: Parsing error: Unexpected token 10 | <div className={styles.addPost}> 11 | { > 12 | if (typeof props.label !== 'undefined') { | ^ 13 | <label htmlFor="addPost">{props.label}</label> 14 | } 15 | }

Как такое поправить?

пробую проверить существование пропса перед тем как вывести объект

if(props.label)

если андеф => false

но если пустой будет тоже фолс

может и так, но там что-то со скобками не то

{props.label && <label htmlFro ...></label}

кто нибудь с socket.io дружит?

{props.label && <label htmlFro ...></label}

спасибо. это лучший рецепт

Глупый наверное вопрос, но хотелось бы спросить. Нужно делать несколько фильтраций и сортов с массивом данных. При чем одна фильтрация представляет собой компоненту с определённой группой товаров. Вторая например фильтрация по диапазону цены. Сделал хок для всех отфильтроввнных компонент с фильтрацией по цене и сортировками. С помощью редукс форм получаю фильтры, храню их в стейте, но сама логика фильтраций написана в хоке. Это целесообразно вообще? Ну Типо проводить так много фильтров в компоненте с массивом, который получаю из пропсов

если тебе их надо будет исползовать по отдельности то да

Например? Ну каждая компонента по сути отфильтрованный по категории массив. Но да, в перспективе они могут отличаться и ещё чем нибудь) а как можно допустим реализовать функцию сортировки в редюсере? В данном случае. Просто я пробовал но у меня не меняется стейт:/

Может быть фейл в том, что я забыл про глубокую копию, точно не помню

прислали через @g_codebot

Глупый наверное вопрос, но хотелось бы спросить. Нужно делать несколько фильтраций и сортов с массивом данных. При чем одна фильтрация представляет собой компоненту с определённой группой товаров. Вторая например фильтрация по диапазону цены. Сделал хок для всех отфильтроввнных компонент с фильтрацией по цене и сортировками. С помощью редукс форм получаю фильтры, храню их в стейте, но сама логика фильтраций написана в хоке. Это целесообразно вообще? Ну Типо проводить так много фильтров в компоненте с массивом, который получаю из пропсов

Как вариант, хранить значение фильтров в стэйте, а в контейнере фильтровать данные

Ибо на сколько я понимаю смысл хоков, они не изменят данные, а добавляют свойства

Ребята, а для чего нужен webpack? что это такое, часто в вакансиях вижу, прогуглил но толком ничего не понял. Объясните на примере в простых словах)

Как залить реакт приложение на сервер?

Как залить реакт приложение на сервер?

npm run build, потом содержимое сливаешь на сервер

Понял, принял, осознал, осмыслил

это, если с create-react-app было сделано

это, если с create-react-app было сделано

И плюс в файле .json пару строк добавить перед тем, как выполнять эту команду)

Например? Ну каждая компонента по сути отфильтрованный по категории массив. Но да, в перспективе они могут отличаться и ещё чем нибудь) а как можно допустим реализовать функцию сортировки в редюсере? В данном случае. Просто я пробовал но у меня не меняется стейт:/

вообще желательно разделять данные и интерфейс. т.е. в редаксе хранишь полный список и значения фильтров(если они вынесены из отображалки или должны сохраняться) а уже в отображалке создаешь массив отсортированных данных для интерфеса, не трогая и не меняя исходные данные в редаксе

Ибо на сколько я понимаю смысл хоков, они не изменят данные, а добавляют свойства

Ну у меня фильтры и так там. Ну просто выглядело как то не феншуйно эта огромная функция в компоненте. Ну да вроде порефакторил и норм

вообще желательно разделять данные и интерфейс. т.е. в редаксе хранишь полный список и значения фильтров(если они вынесены из отображалки или должны сохраняться) а уже в отображалке создаешь массив отсортированных данных для интерфеса, не трогая и не меняя исходные данные в редаксе

Ага, спасибо

Ну у меня фильтры и так там. Ну просто выглядело как то не феншуйно эта огромная функция в компоненте. Ну да вроде порефакторил и норм

Для более элегантного фильтра посмотри библиотеку loadash, вреде так называеться

Всем привет. Может кто знает, что за значок?

Всем привет. Может кто знает, что за значок?

Еще бы знать...что за DOM в скрине твоем ))

Короче проект написан на Zend Framework. Нигде такого значка нет, а на этом файле есть. Я уже было подумал, что латиница в название файла проскочила, но нет

@vita_milaeva , да вы поэт)) Я уже кофе сварил, а вы еще пишете))