'Home' cannot be used as a JSX component. using react typescript-CodePudding

I am new to react and typescript,i want to fetch data from an api into a table using typescript and react .i have two files Home.tsx and App.tsx .the major code that has the api is contained in Home.tsx and the other one is in App.tsx .below is the error message that i am getting 'Home' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element. this is Home.tsx

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Route, Router } from "react-router-dom";
//import  styledComponents from "styled-components";

// Could not find a declaration file for module 'styled-components'. '/var/www/html/public_html/react_js/myapp_task/node_modules/styled-components/dist/styled-components.cjs.js' implicitly has an 'any' type.
//   Try `npm i --save-dev @types/styled-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'styled-components';`

import backgroundImage from "./background.png";

const Home = () => {
  const [users, setUsers] = useState<YourUserType[]>([]);
  //const [users, setUsers] = useState("");

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/users";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        console.log(json.slip.users);
        setUsers(json.slip.users);
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
  }, []);
//type Users = typeof users
      //type Users = typeof users {
     type YourUserType = {
        id: string,
        name: string,
        username: {
            slug: string
        },
        email: string,
        address: string,
    }

    const Table = ({ users }: { users: YourUserType[] }) => {

        return ( 
            <table>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Name</th>
                  <th>Username</th>
                  <th>Email</th>
                  <th>Address</th>
                </tr>
              </thead>
              <tbody>
                {users.length > 0 ? (

                    users.map((user, idx) => {
                   return (
                    <tr key={idx}>
                      <td>{ user.id }</td>
                      <td>{ user.name }</td>
                      <td>{ user.username.slug}</td>
                      <td>{ user.email}</td>
                      <td>{ user.address}</td>
                    </tr>
                  )
                 })) : <tr><td>Loading...</td></tr> }
              </tbody>
            </table>
        );
    }
}
export default Home;

const Wrapper = styled.div`
  padding-top: 150px;
  margin: 0 auto;
`;

const Title = styled.h1`
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
  text-align: center;
`;

const Description = styled.h2`
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 48px;
  color: #ffffff;
  text-align: center;
`;

const Background = styled.img`
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: -1;
`;

below is the code that is contained in App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from "./components/Home";
import { Route, Link } from 'react-router-dom';
//import { Route, Router, Link } from "react-router-dom";


function App() {
  return (
    <div className="App">
      <header className="App-header">

  {/*      <Home />*/}
        <div>
          <nav>
            <ul>
              <li>
                <Link to={'/'}> Home </Link>
              </li>

              <li>
              </li>
            </ul>
          </nav>

            <Route path={'/'} element={<Home/>} />

        </div>
      </header>
    </div>
  );
}

export default App;
//export default Table;

CodePudding user response：

It's because you are not returning anything from Home because Table function is never called. Here is a working example.

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Route, Router } from "react-router-dom";
//import  styledComponents from "styled-components";

// Could not find a declaration file for module 'styled-components'. '/var/www/html/public_html/react_js/myapp_task/node_modules/styled-components/dist/styled-components.cjs.js' implicitly has an 'any' type.
//   Try `npm i --save-dev @types/styled-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'styled-components';`

import backgroundImage from "./background.png";

const Home = () => {
  const [users, setUsers] = useState<YourUserType[]>([]);
  //const [users, setUsers] = useState("");

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/users";

    const fetchData = async () => {
      try {
        /*         const response = await fetch(url,);
        const json = await response.json();
        console.log(json.slip.users);
        setUsers(json.slip.users); */
        fetch(url)
          .then((response) => response.json())
          .then((data) => {
            console.log(JSON.stringify(data));
            setUsers(data);
          });
      } catch (error) {
        console.log("error", error);
      }
    };

    fetchData();
  }, []);
  //type Users = typeof users
  //type Users = typeof users {
  type YourUserType = {
    id: string;
    name: string;
    username: {
      slug: string;
    };
    email: string;
    address: string;
  };

  // const Table = ({ users }: { users: YourUserType[] }) => {

  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Username</th>
          <th>Email</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        {users.length > 0 ? (
          users.map((user, idx) => {
            return (
              <tr key={idx}>
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.username.slug}</td>
                <td>{user.email}</td>
                <td>{JSON.stringify(user.address)}</td>
              </tr>
            );
          })
        ) : (
          <tr>
            <td>Loading...</td>
          </tr>
        )}
      </tbody>
    </table>
  );
  //  }
};
export default Home;