react

Error: Objects are not valid as a React child (found: object with keys {closeElement}). If you meant to render a collection of children, use an array instead.

Ошибка возникает когда вы хотите передать объект напрямую в JSХ, в моем случае проблемы была в фигурных скобках вокруг closeElement, который является JSX-элементом и определен как-то так:

 const closeElement = backRoute ? 
    <NavLink to={backRoute}> {closeElementView} </NavLink> : '';

неправильно:

Можно так:

import React from "react";

type ModalWindowPropsType = {
    children: React.ReactNode,
}

export default function ModalWindow(props: ModalWindowPropsType) {

    return (
        <>
            {props.children}
        </>
    );
}

Пример:

Соберем тут некоторые заметки, которые полезны для работы со вложенными маршрутизаторами

• Получить строку маршрута, которому соответствует данный компонент:
  

  
  function ContractViewTabs(props) {
      const parentRoutePath = props.match.path;
  // ......
  
  

• Параметр из URL по шаблону

  Если маршрут описан как-то так:

Без строчки // eslint-disable-next-line получаем предупреждение:

React Hook React.useEffect has missing dependencies: 'history.location.search' and 'match.params'. Either include them or remove the dependency array react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

для кода:

Пример на typescript, на JS все будет тем же, кроме описания типов:

Line 29:8: React Hook React.useCallback has an unnecessary dependency: 'sortByPriceDown'. Either exclude it or remove the dependency array. Outer scope values like 'sortByPriceDown' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps

Для кода:

Проблема наблюдалась для тернарного оператора вида:

a ? b : c;

-- в JS так писать нельзя, нужно обязательно куда-то передать значение напр:

d = a ? b : c;

После имени свойства просто добавляем знак вопроса (если этого свойства может не быть):

type SortSignPropsTypes = {
  onUp?: Function,
  onDown?: Function,
};

Потом эти свойства можно получить разложение объекта:

export default function SortSign(props: SortSignPropsTypes) {
  
  const {onUp, onDown} = props;

• Базовое определение хранилища store: https://redux.js.org/introduction/gettin...
• Провайдер хранилища для приложения (предварительно нужно определить store): https://redux.js.org/tutorials/fundament...