Отлов изменения дочернего компонента?

Попробуйте контекст(как у же предложили) и обратите внимание, что реакт пропагандирует композицию, вместо наследования.
https://ru.reactjs.org/docs/composition-vs-inherit...

Отлов изменения дочернего компонента?

Владимир, полагаю, что императивно меняет некую переменную, которая почему-то играет роль состояния?

Раз у человека это написано в коде, значит что-то делает и не создаёт ему проблем.

Как программно нажать на этот проклятый div?

Proger5913 попробуйте https://learn.javascript.ru/dispatch-events#metod-... , возможно поможет

Что делать с сообщениями в чате, которых уже не видно?

В вашем случае можно попробовать ограничить количество символов в блоке chat-content, если сообщение просто текстом(метод substring в помощь) / добавлять hidden в первые элементы, если количество элементов в блоке chat-content превышает 10(например). Получить количество поможет метод childElementCount или .children().length, а дальше уже разберетесь(а то как-то неверно для обучения сразу все решение выдавать))

Метод, честно признаюсь, несколько деревянный. Например, если понадобится подключить функционал удаления сообщений, то будет сложнее в реализации. Проще было бы пушить сообщения в массив, а оттуда через цикл или перебор отрисовывать их в блоке отдельным элементом. В таком случае вы заметите, сколь сильно расширяться возможности как в моменте, так и на перспективу.

Как реализован данный функционал?

Iana S, значит вы еще не показали его опытному специалисту.
Почитайте подробнее статью на mdn. Так каждый шаг подробно описан.

Как реализован данный функционал?

Iana S,
Наверняка сказать не берусь, но на вскидку:
Подготовка исходника - фотошоп в помощь. По сути тоже на один референс не более пары часов(но это я по своим скудным навыкам сужу).
Сам код - не больше часа + какое-то время на представление(чтобы все было красиво).
Минут 10 попить кофе)

Как скрыть компонент в React при клике вне компонента?

Могу ошибаться, но насколько понял из анализа премиальных шаблонов Material-UI, более качественной практикой считается вынос стилей в отдельный файл.

https://github.com/creativetimofficial/material-ki... (ознакомьтесь с файловой структурой, для понимания)
https://demos.creative-tim.com/material-kit-react/... (сам проект)

Могу ошибаться, но для чистоты кода было бы эффективнее вынести блоки в отдельные компоненты.
например:

{
      !editMode
      ? <Button {...props} /> 
//наименования условны, но вы можете подумать над тем, как сделать компоненты переиспользуемыми
      : <Form {...props} />
    }

Инпуты можно обернуть в тег формы и в атрибуте тега указать методы onChange и onSubmit(у кнопки type='submit'). Так у вас и состояний будет меньше.
Ознакомьтесь https://ru.reactjs.org/docs/forms.html#handling-mu...

Будет немножко чище и понятнее, если вы вынесете методы в отдельные функции.

onClick={() => {
              props.addProject(props.userId, {
                name: newName,
                content: newContent,
              });
              setEditMode(false);
            }}

...сделать:

const newProjectHandler = (e)=>{
  e.preventDefault();
  props.addProject(props.userId, {
     name: newName,
     content: newContent,
   });
   setEditMode(false);
}
...
<form 
  onSubmit = { newProjectHandler }
>
...
</form>

Ну и чтобы каждый раз не обращаться props.someProps можно сделать немножко удобнее и воспользоваться деструктуризацией:

const  AddProject = ({ addProject, userId }) =>  {
...
}

Как-то так. Но не принимайте за панацею, могу ошибаться местами.
Успехов вам.

Как изменить состояние родителя из дочернего компонента React?

8 XL, В общем, если я верно понял, то примерно все выглядит вот так:

<App>
  <Header />
  <Content>   --вы, предположительно, передаете сюда
    <Service />   --а нужно вот сюда
  </Content>
</App>

Так же, для удобства и наглядности, рекомендую ознакомиться https://ru.reactjs.org/docs/composition-vs-inherit...

Как изменить состояние родителя из дочернего компонента React?

Максим Калинин, предполагаю, что либо вы не в тот компонент передали метод, либо e.preventDefault()(но тут я слегка сомневаюсь, ибо этот метод больше для кнопок)

Если первое - ваша задача передать метод именно в тот компонент, в котором он вызывается,
если же второе, то это будет несколько странно.

Как изменить состояние родителя из дочернего компонента React?

e.preventDefault() пробовали в onChange?

И у вас родитель рендерит Content , куда вы и передаете метод, в то время как сам метод вы применяете в компоненте Service

Оцените работу пожалуйста?

Vitaliy0889, Попробую в конструктивную критику, а то глядя на комментарии, тут её слегка не оч.

1. Действительно не понятен посыл. Первостепенно продающий плакат должен привлекать внимание к продаваемому товару. Здесь же выходит несколько(очень сильно) иначе.

2. Цветовая гамма. Рекомендую ознакомиться с дизайнерским/цветовым кругом(академический вариант) или пойти по уму и внести в закладки сей чудесный сервис https://color.adobe.com/ru/create/color-wheel (рекомендую изучить, там много полезностей).

3. Детали. Сделайте больше гармонии: например в заглавии большая У имеет сильный отступ, слегка выпадая из общего. Рекомендую важный текстовый контент делать в одном регистре. Сам товар так же выпал - обозначьте его, добавьте тень, вынесите в отдельный блок - это добавит эффективности.

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

5. Выбирайте контент более лучшего качества. Замыленные хот-доги - такое себе, говоря откровенно.

Как спроектировать 3 компонента?

Добрый день.

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

Как использовать document.querySelector в React?

Нет, он не неверен в корне. Неоднократно находил в популярных библиотеках подобное решение(поиск элемента DOM через querySelector/elementById. Но здесь же вопрос работы в конкретном фреймворке, а он позволяет выполнить желаемое на его функционале - так почему бы не пользовать, вместо изобретения велосипедов.
Касаемо стиля: в предложенном мной варианте - пользование функционала фреймворка(не просто же так в нем работаем). В вашем же случае - тоже решение, но, как мне кажется, упускающее имеющиеся возможности.

Как открыть в браузере локалхост 3000 проект который делаю в React?

LaraG, я обычно поступаю так, когда писать лень, а кликать не лень(VS Code):

- открываю папку с проектами, выбираю папку нужного проекта и перетягиваю её на ярлык VS Code
- VS Code запускает проект сразу зная его верное расположение
- в VS Code запускаю терминал, где как раз-таки сразу отражен путь к проекту
- 'npm start' и всё, проект запущен на локалхост

Попробуйте, возможно это поможет.

Что здесь является this?

Так вопрос стоит не просто в классах Js, а именно в классовых компонентах React(только не спрашивайте разницу).
А передается метод родительского компонента в компонент дочерний(как и состояние).
Я все же рекомендую освежить знания.

Что здесь является this?

Эм...но...но есть же официальная документация в которой

Компонент выше по иерархии (FilterableProductTable) будет передавать модель данных через пропсы.

Получается, что все же передается.

В общем почитайте, как оно работает Философия React

Как правильно использовать useCallback в React?

useCallback мемоизирует функцию. То есть с каждым новым рендером вы вызываете один и тот же setState.

А зачем вам в данной структуре useCallback вообще нужен? Выходит, что он не к месту. Тогдa уж он больше подходит для doSomething, либо стоит попробовать в зависимости добавить само состояние, при изменении которого и будет запускать вот это вот всё.