Всегда так делаю

Где компонент там и картинки . Логично ? Логично

Всем привет. Почему тут у меня getData внтури useEffect вызывается бесконечно ?   Как исправить ?

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getData } from "./../../redux/actions";

function Posts({ items, getData }) {
  useEffect(() => {
    getData();
  });

  return (
    <>
      {items && items.length > 0 ? (
        items.map((i) => (
          <div key={i.objectID} style={{ backgroundColor: "green" }}>
            <h1>{i.title}</h1>
          </div>
        ))
      ) : (
        <div>Not yet</div>
      )}
    </>
  );
}

const mapStateToProps = (state) => ({
  items: state.items,
});
export default connect(mapStateToProps, { getData })(Posts);

а если картинка в двух компонентах используется?)

Дело вкуса. Можно вынести повыше и подписать картинки для header , footer

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getData } from "./../../redux/actions";

function Posts({ items, getData }) {
  useEffect(() => {
    getData();
  });

  return (
    <>
      {items && items.length > 0 ? (
        items.map((i) => (
          <div key={i.objectID} style={{ backgroundColor: "green" }}>
            <h1>{i.title}</h1>
          </div>
        ))
      ) : (
        <div>Not yet</div>
      )}
    </>
  );
}

const mapStateToProps = (state) => ({
  items: state.items,
});
export default connect(mapStateToProps, { getData })(Posts);

useEffect(() => {
    getData();
  }, []);

передай пустой массив

useEffect(() => {
    getData();
  }, []);

Можете объяснить почему так ?

Вот ещё пишут

Можно картинку поместить в ту же папку где и CSS файл. Тогда в CSSнике можно будет сделать url('./image.jpg'), а вебпак это дело разрулит во время компиляции и поместит картинку куда надо.

Если вы пришли в Реакт и модульные бандлеры (ака Вебпак) со старого доброго Галпа или вообще без него обходились раньше, то такой подход немного ломает стереотип. Мы привыкли хранить картинки в папке public/images, а стили в папке public/styles. Но в мире вебпака совершенно нормально хранить стили и статитику рядом с кодом. Собственно, вебпак и нужен для того чтоб это подключать и распределять как нужно.

В последнее время стал популярен подход так называемого Модульного ЦСС (CSSModules): это когда стили и статические файлы относящиеся к компоненту хранятся в папке компонента. Сам Вебпак позаботится о том чтоб во время компиляции положить стили и статику куда нужно. За это мы его и любим.

Спасибо

TypeError: Object(...) is not a function - почему ругается на onClick()?

dispatch выведи в консоль 🌝

Привет всем. Мне пишет что нельзя мапить undefined но прикол в том что пишет это при том что <Content не рисует ничего если isLoaded = false, а spec айдефайнд только в тот момент когда isLoaded = false

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

блин, давай прямо, я уже пол часа туда внимательно смотрю

что бы передать контенту чилдренны ты мапишь то чего еще нету

Если вынесу блок мапа отдельно, решит проблему?

смотря как вынесишь, ты вобще не должен мапить где либо если еще не isLoaded

По хорошему в эффект можно 👀

Всем дратути. Такой вопрос. Какие функции вы выносите в папку utils?