title: React: How to solve: Property 'children' does not exist on type 'IntrinsicAttributes & Props'
body: <p>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.</p>
  <p>This is the error I get:
  Type '{ children: string[]; key: number; }' is not assignable to type 'IntrinsicAttributes &amp; Props'.
  Property 'children' does not exist on type 'IntrinsicAttributes &amp; Props'.</p>
  <p>This is the code:</p>
  <pre><code>    interface Props {
    pokemonItem: PokemonItem;
  }
  
  export const PokemonCardList = (props: Props) =&gt; {
    const { pokemonItem } = props;
    const {
      id = '',
      name = '',
      weight = '',
      height = '',
      abilities = '',
    } = pokemonItem;
  
    const [pokemon, setPokemon] = React.useState&lt;PokemonItem[]&gt;([]);
    const [loadItems, setLoadItems] = React.useState(API_URL);
  
    const getPokemons = async () =&gt; {
      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) =&gt; {
        result.forEach(async (element: any) =&gt; {
          const response = await fetch(
            `https:pokeapi.co/api/v2/pokemon/${element.id}`
          );
          const data = await response.json();
          // // setPokemon((currentArrayList) =&gt; [...currentArrayList, data]);
          pokemon.push(data);
        });
      };
  
      getEachPokemon(data.results);
      await console.log(pokemon);
    };
  
    React.useEffect(() =&gt; {
      return getPokemons();
    }, []);
  
    return (
      &lt;div&gt;
        {pokemon &amp;&amp;
          pokemon.map((item, index) =&gt; (
            &lt;PokemonCard key={index}&gt;
              {item.name} {item.height} {item.weight} {item.abilities}
            &lt;/PokemonCard&gt;
          ))}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Thie pokemonCard component:</p>
  <pre><code>interface Props {
    pokemonItem: PokemonItem;
  }
  
  const PokemonCard = (props: Props) =&gt; {
    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 (
      &lt;div imageLoaded={imageLoaded}&gt;
        &lt;div
          src={urlImage}
          onLoad={() =&gt; setImageLoaded(true)}
        /&gt;
        &lt;div&gt;
          Name: {name}
          Height: {height}
          Weight: {weight}
          Abilities: {abilities}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>