Axios doesnt download users from API - reactjs

Question

I wanted to download users from API with axios but I get an error and when I remove {} from UsersProvider it doesn't download anything for me. How could this be fixed or changed?
Error
File Main:
import {UsersProvider} from "../../contexts/Users";
const Main:React.FC= () => {
const [showUser, setShowUser] = useState("");
return (
<div>
<div>
<Header/>
</div>
<UsersProvider>
<UsersList/>
<Debounce onChange={setShowUser}/>
</UsersProvider>
</div>
)
}
export default Main
File Users:
import React, {useState, useEffect} from 'react';
import axios from 'axios';
type Users = Person[];
type Person = {
name:string;
username:string;
}
export const UsersContext = React.createContext<Users>([]);
const UsersProvider:React.FC= ({children}) => {
const [users, setUsers] = useState<Person[]>([]);
useEffect(() => {
axios
.get(`https://jsonplaceholder.typicode.com/users`)
.then((response) =>{
setUsers(response.data);
})
.catch((error) => {
console.log(error);
});
},[]);
return (
<UsersContext.Provider value={users}>
{children}
</UsersContext.Provider>
)
}
export default UsersProvider

Answer 1

import { UsersProvider } from "../../contexts/Users";
Above import is called named import. But, in your code, you have exported UsersProvider as the default export in the ../../contexts/Users file. Hence you're getting that error.
This would work only if you have exported the UsersProvider as below in the ../../contexts/Users file.
export const UsersProvider: React.FC= ({children}) => {
// rest of the code...
But, If you don't want to have named exports then you can write your import like this:
import UsersProvider from "../../contexts/Users";

Answer 2

I just did that only I still have no idea why it is not downloading my user list from axios. Everything was working a few months ago, but now it doesn't download at all

Answer 3

import React from 'react';
import './style.css';
type Props = {
filteredUsers?:Array<Person>;
}
type Person = {
name:string;
username:string;
}
const UsersList: React.FC<Props> = ({filteredUsers = []}) =>{
return(
<div className="ListHead">
<ol className="list">
{filteredUsers.map((Person) => (
<li key={Person.name}>
<span>{Person.name}</span>
#{Person.username}
</li>
))}
</ol>
</div>
)}
export default UsersList

Answer 4

UsersProvider is a default export .
you need to do
import UsersProvider from "../../contexts/Users";
Since we are using the context now , we can consume the users in the UsersList as
import React, { useContext } from 'react';
import UsersContext from 'your path'
const UsersList: React.FC = () => {
const users = useContext(UsersContext);
return(
<div className="ListHead">
<ol className="list">
{users.map((Person) => (
<li key={Person.name}>
<span>{Person.name}</span>
#{Person.username}
</li>
))}
</ol>
</div>
)}
export default UsersList

Answer 5

I have this, but maybe something must change here?
import React from 'react';
import {DebounceInput} from 'react-debounce-input';
import './style.css';
type Props ={
onChange:Function;
}
const Debounce:React.FC<Props> = ({onChange}) => {
return(
<DebounceInput
onChange={(e) => onChange(e.target.value)}
debounceTimeout={500}
className="SearchInput"
placeholder="Search by user name..."
/>
)
}
export default Debounce