CODEWITHSUNDEEP
javascriptreactjstypescript
PositiveGuy
PositiveGuy

Reputation: 20212

TS error on map: does not exist on type in React Hooks Return

Not sure how to fix this TS syntax error:

Interfaces.tsx:

export interface Company {
  name: string;
}

FeaturedCompanies.tsx:

import React, { useEffect, useState } from 'react';
import { Company } from '../Interfaces/Interfaces';

const FeaturedCompanies = () => {
    const [companies, setData] = useState({ companies: [] });
    const featuredCompanies: Array<Company> = [
        { name: 'Sony' },
        { name: 'Nike' },
        { name: 'Lowes' },
        { name: 'Home Depot' },
        { name: 'Adidas' },
    ];

    useEffect(() => {
        setData({ companies: featuredCompanies });
    }, []);

    return (
        <div>
            {companies.map((company) => <div data-testid="company">{company.name}</div>)}
        </div>
    );
};

export default FeaturedCompanies;

Error: Property 'map' does not exist on type '{ companies: any[]; }'

Upvotes: 0

Views: 64

Answers (2)

Sarun UK
Sarun UK

Reputation: 6746

Try the below code :-

import React, { useEffect, useState } from 'react';
import { Company } from '../Interfaces/Interfaces';

const FeaturedCompanies = () => {
    const [companies, setData] = useState<Company>([]);
    const featuredCompanies: Company[] = [
        { name: 'Sony' },
        { name: 'Nike' },
        { name: 'Lowes' },
        { name: 'Home Depot' },
        { name: 'Adidas' },
    ];

    useEffect(() => {
        setData(featuredCompanies);
    }, []);

    return (
        <div>
            {companies.map((company) => <div data-testid="company">{company.name}</div>)}
        </div>
    );
};

export default FeaturedCompanies;

Upvotes: 0

Anton Kononenko
Anton Kononenko

Reputation: 493

You store in the state an object with companies, I believe the easiest fix would be replace

const [companies, setData] = useState({ companies: [] });

with

const [companies, setData] = useState([]);

and change useEffect to:

setData(featuredCompanies);

Upvotes: 3

Related Questions