Почему React рендерит не то?

Question

[Андрей Иванов]

Тут главный рендер. Передаю в Row цифры 1 и 2.
return (
            <Row left={1} right={2} />
        );

Он возвратить должен разметку с цифрами 1 в левой колонке и 2 - в правой. А он возвращает компонет вообще не тот

return (
        <div className="row mb2">
            <div className="col-md-6">
                {left}
            </div>
            <div className="col-md-6">
                {right}
            </div>
        </div>
    );

Comments

[Андрей Иванов]

Антон Спирин, Это не весь код. А ошибка в том что я импортировал Row а путь к этому компоненту задал неверный, вот и рендерил не то.

Answer 1

[hzzzzl]

если возвращает "вообще не тот", то может быть ты подключил другой Row.js из другой папки как-нибудь

Comments

[Андрей Иванов]

А ошибка в том что я импортировал Row а путь к этому компоненту задал неверный, вот и рендерил не то.

Answer 2

[Максим]

В файле row.js укажи (props), а не ({left, right}), а затем, чтобы вытащить эти значения напиши props.left, props.right

Пример

Comments

[Антон Спирин]

Нет никакой разницы. Автор, видимо, скачал чужой код и не смог в нем разобраться. Там в компоненте app даже экспорта нет.

[Андрей Иванов]

Антон Спирин, По уроку делаю. Это не весь код. А ошибка в том что я импортировал Row а путь к этому компоненту задал неверный, вот и рендерил не то.

[Антон Спирин]

Андрей Иванов, посмотрел исходники star-db. Вы неправильно поступили, что вынесли дочерние компоненты App в отдельный компонент и назвали его Row. Row - это общепринятое имя для строки сетки. По хорошему реализация Row обычно выглядит примерно так:

const Row = ({ children }) => <div class="row">{children}</div>;

И используется так:

const App = () => {
  return (
    <div>
      <Row>
        <Col md={6}>
          <ItemList />
        </Col>
        <Col md={6}>
          <PersonDetails />
        </Col>
      </Row>
    </div>
  );
};