React Hooks and TypeScript Fetching API: Object is possibly 'null'

Question

I'm doing a tutorial on React Hooks and fetching data. Here's my component to fetch customers and map them out in a list:

const useFetch = (url: string) => {
  const [customers, setCustomers] = useState<null | []>(null);
  const [loading, setLoading] = useState(true);

  // Similiar to componentDidMount() and componentDidUpdate()
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);
      setCustomers(result.data);
      setLoading(false);
    };
    fetchData();
  });

  return { customers, loading };
};

const url = 'https://jsonplaceholder.typicode.com/users';

export const LatestCustomers: React.FC<Props> = ({
  description
}: Props): JSX.Element => {
  const { customers, loading } = useFetch(url);

  return (
    <Container>
      {loading ? (
        <div>...Loading...</div>
      ) : (
        <tr>
          {customers.map(customer => (
            <div key="user.id">{customer.name}</div>
          ))}
        </tr>
      )}
    </Container>
  );
};

With that, I got the error:

Object is possibly 'null'.  TS2531

    108 |               ) : (
    109 |                 <tr>
  > 110 |                   {customers.map(customer => (
        |                    ^
    111 |                     <div key="user.id">{customer.name}</div>
    112 |                   ))}
    113 |                 </tr>

How do I solve this?

maybe const { customers = [], loading } = useFetch(url); will solve — Vencovsky
– Vencovsky, Commented Jun 7, 2019 at 11:25
There are several solutions to the problem, but basically either: 1. make sure it's never null; or 2. deal with the possibility that it might be null (null.map is a TypeError). — jonrsharpe
– jonrsharpe, Commented Jun 7, 2019 at 11:26

djskinner · Accepted Answer · 2019-06-07 11:28:36Z

1

Because the type supplied to useState is null | [] then customers is given that type signature.

There are a couple of ways to deal with this. My suggestion would be to start with an empty array:

const [customers, setCustomers] = useState<[]>([]);

Alternatively if you wish to maintain the optional typing then you should check customers is not null first:

{customers && customers.map(customer => ( ...

Or if you're really sure it will always be defined you could use the TypeScript non-null assertion ! operator:

{customers!.map(customer => (

answered Jun 7, 2019 at 11:28

djskinner

8,1254 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swix Over a year ago

I tried all of them, it gives Property 'name' does not exist on type 'never'.

djskinner Over a year ago

So the problem in your question is solved but now TS is expecting customer to be typed. Do you have a type defined for your customer objects? If so, use it: const [customers, setCustomers] = useState<Customer[]>([]);

GibboK · Accepted Answer · 2019-06-07 12:01:57Z

1

A robust solution to handle nullable value could be to use an Option in fp-ts and fromNullable

https://github.com/gcanti/fp-ts/blob/master/src/Option.ts

Example:

{fromNullable(customers).map(x=> {...})}

Interesting article: https://davetayls.me/blog/2018/05/20/fp-ts-01-working-with-nullable-values

Otherwise more straightforward approach:

{customers && customers.map(x => ( ...

answered Jun 7, 2019 at 12:01

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

2 Comments

Swix Over a year ago

But then it gives Property 'name' does not exist on type 'never'.

GibboK Over a year ago

please post the code you are trying, I would be happy to help! thanks

Collectives™ on Stack Overflow

React Hooks and TypeScript Fetching API: Object is possibly 'null'

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related