api call using redux saga inside a react

Question

I am trying to learn saga by following the below medium tutorial and implement in stackblitz. But I was getting a path issue, I change by different ways and fixed it.Now I am getting a different issue. Googled but still no luck. Providing my code snippet and stackblitz below.Can you let me know how to fix it

https://medium.com/@lavitron/make-your-first-call-to-api-using-redux-saga-15aa995df5b6

https://stackblitz.com/edit/stackblitz-starters-rweulf?description=React%20%20%20TypeScript%20starter%20project&file=src%2Freducers%2Findex.js,src%2Factions%2Findex.js,src%2Findex.tsx,src%2Fsagas%2Findex.js,src%2Fcontainers%2FNewsItem.js,src%2Fcontainers%2FLoading.js,src%2FApp.tsx&title=React%20Starter

Error in /turbo_modules/[email protected]/cjs/react-dom.development.js (28439:17) Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

import { FC } from 'react';

import './style.css';
import { StateDropdown } from './components/StateDropdown';

import Button from './containers/Button';
import NewsItem from './containers/NewsItem';
import Loading from './containers/Loading';

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <Button />
      <Loading />
      <NewsItem />

      <StateDropdown />
    </div>
  );
};

Answer 1

• the Button.js file must export a component
• the component files must end in .tsx not .js in order to be compiled by the TypeScript compiler

Stackblitz with the updates: https://stackblitz.com/edit/stackblitz-starters-dxgf79?file=src%2Fcontainers%2FNewsItem.tsx