CODEWITHSUNDEEP
reactjstypescript
Waiz
Waiz

Reputation: 603

React: How to solve: Property 'children' does not exist on type 'IntrinsicAttributes & Props'

I'm trying fetch data from an API and display the data into list of cards in React with typeScript. Since I am new with React in Typescript, not sure how I can solve this error or am I missing something.

This is the error I get: Type '{ children: string[]; key: number; }' is not assignable to type 'IntrinsicAttributes & Props'. Property 'children' does not exist on type 'IntrinsicAttributes & Props'.

This is the code:

    interface Props {
  pokemonItem: PokemonItem;
}

export const PokemonCardList = (props: Props) => {
  const { pokemonItem } = props;
  const {
    id = '',
    name = '',
    weight = '',
    height = '',
    abilities = '',
  } = pokemonItem;

  const [pokemon, setPokemon] = React.useState<PokemonItem[]>([]);
  const [loadItems, setLoadItems] = React.useState(API_URL);

  const getPokemons = async () => {
    setLoading(true);
    const response: any = await fetch(loadItems);
    const data = await response.json();

    setLoadItems(data.next);
    setPokemon(data.results[0].name);
    setLoading(false);
    
    const getEachPokemon = (result: any) => {
      result.forEach(async (element: any) => {
        const response = await fetch(
          `https:pokeapi.co/api/v2/pokemon/${element.id}`
        );
        const data = await response.json();
        // // setPokemon((currentArrayList) => [...currentArrayList, data]);
        pokemon.push(data);
      });
    };

    getEachPokemon(data.results);
    await console.log(pokemon);
  };

  React.useEffect(() => {
    return getPokemons();
  }, []);

  return (
    <div>
      {pokemon &&
        pokemon.map((item, index) => (
          <PokemonCard key={index}>
            {item.name} {item.height} {item.weight} {item.abilities}
          </PokemonCard>
        ))}
    </div>
  );
};

Thie pokemonCard component:

interface Props {
  pokemonItem: PokemonItem;
}

const PokemonCard = (props: Props) => {
  const { pokemonItem } = props;
  const {
    id = '',
    name = '',
    weight = '',
    height = '',
    abilities = '',
  } = pokemonItem;

  const [imageLoaded, setImageLoaded] = React.useState(false);
  const urlImage = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png?raw=true`;

  return (
    <div imageLoaded={imageLoaded}>
      <div
        src={urlImage}
        onLoad={() => setImageLoaded(true)}
      />
      <div>
        Name: {name}
        Height: {height}
        Weight: {weight}
        Abilities: {abilities}
      </div>
    </div>
  );
};

Upvotes: 31

Views: 79976

Answers (4)

jonathasborges1
jonathasborges1

Reputation: 2814

import React from "react";
import Paper, { PaperProps } from "@material-ui/core/Paper";
    
interface TableEmployeeProps extends PaperProps {
        // your props
}

const TableEmployee: React.FC<TableEmployeeProps> = (props) => {
 return (
      <Paper  {...props}> </Paper>
}

Upvotes: 0

ET-CS
ET-CS

Reputation: 7210

Use PropsWithChildren from react:

import React, {Component, PropsWithChildren} from "react";

interface OwnProps {
    foo?: BarComponent;
}

// For class component
class MyComponent extend Component<PropsWithChildren<OwnProps>> {
   ...
}

// For FC
const MyFunctionComponent: FC<PropsWithChildren<Props>> = ({
    children,
}) => (...)

Upvotes: 25

Andrew F
Andrew F

Reputation: 534

Try this (add type for you component):

export const PokemonCardList: React.FC<Props> = (props) => {}

Upvotes: 4

Houssam
Houssam

Reputation: 1877

According to your definition of the PokemonCard component, you should be passing the pokemonItem as follow:

<PokemonCard pokemonItem={item} key={item.id} />

I have replaced the key prop as it is not recommended to use indexes as keys (see documentation), you could use the item's id instead. And you need to update the prop interface for the PokemonCard component so that the additional key prop doesn't break the validation:

interface Props {
  pokemonItem: PokemonItem;
  key: string;
}

Upvotes: 4

Related Questions