Why is the component unknown?

Question

React

App:

export const App = () => {
  const [layout, handleChangeLayout] = useState(LayoutType.DESKTOP);

  return (
    <React.Fragment>
      <Header>
        {PAGE_TITLE}
      </Header>
      <SwitchLayout
        layout={layout}
        onChangeLayout={handleChangeLayout}
      />
      <MovieList
        layout={layout}
      />
    </React.Fragment>
  );
};

movielist:

export const MovieList = connect(
  createStructuredSelector({
    movies: getMoviesSelector,
    recommendations: getRecommendationsSelector,
  }),
  { getData: requestData },
)(({
  movies,
  recommendations,
  layout,
  getData,
} : MovieListPropsType) => {
  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="container">
      <div className="row">
        {movies && movies.map((movie, index) => (
          <Movie
            key={movie.id}
            even={(index + 1) % 2 === 0}
            layout={layout}
            movie={movie}
            recommendation={find(recommendations, { movieId: movie.id })}
          />
        ))}
      </div>
    </div>
  );
});

Why is the wrapper component unknown? (So ​​it should be, or am I missing something somewhere? What exactly?)

Answer 1

The essence of the problem is that the anonymous function has an empty name property.
React uses either the given displayName property or the function's own name property. None of the properties are found and you see Unknown
connect in turn, if when creating a wrapper it does not find one of these properties, it uses the word Component , which you see in brackets.
In a good way, the components are described as follows:

const MovieList: React.FC<MovieListPropsType> = ({ ... }) => { ... };

const mapStateToProps = createStructuredSelector({ ... });

const mapDispatchToProps = { ... };

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

PS you have a mistake in the word Desktop .

Answer 2

const MovieList = ...

MovieList.displayName = 'MovieList';

export MovieList;

Answer 3

Try this.

switch (action.type){
        case 'ADD_PRODUCT':
            return {...state,  isAdded: action.payload};
        default:
            return state;
    }