Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 (
      {pokemon &&
        pokemon.map((item, index) => (
          <PokemonCard key={index}>
            {item.name} {item.height} {item.weight} {item.abilities}
          </PokemonCard>
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}>
        src={urlImage}
        onLoad={() => setImageLoaded(true)}
        Name: {name}
        Height: {height}
        Weight: {weight}
        Abilities: {abilities}
                Can you specify where do you get the error exactly as well as the PokemonCard component? It seems that you are passing multiple children to that component without wrapping them in anything, which is not valid JSX.
– Houssam
                Oct 20, 2021 at 9:31
                The error is in the  <PokemonCard key={index}>. The multiple  children was to test, I also tried {...props}, but still kind of confused what would be the right prop to send since it expects a specific props.
– Waiz
                Oct 20, 2021 at 9:33
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,
}) => (...)
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;
                Thanks. That helped I guess with the type error. Now that I call the cardList component in the App.ts file, how to set the pokemonItem props there?       <PokemonCardList pokemonItem={pokemonItem} />
– Waiz
                Oct 20, 2021 at 9:46
                Yes, you pass the "item" in the pokemonItem prop. If you already have it in a variable, you pass that variable, otherwise you could do something like: <PokemonCardList pokemonItem={{ id: 'value', name: 'value', weight: 'value' height:: 'value', abilities: 'value' }} />
– Houssam
                Oct 20, 2021 at 9:50
                What about the image prop. Do I need to define it as well in the data type interface and pass it as prop in the app.ts file.
– Waiz
                Oct 20, 2021 at 9:56
                It really depends on what you're trying to achieve, for me it seems like the PokemonCard component is loading the image on its own and displaying it, so there is no need to pass it around as a prop.
– Houssam
                Oct 20, 2021 at 9:57
                I think your suggestions helped, but I might have one last question. After fixing the issues with your suggestion, I get an error: TypeError: pokemon.map is not a function - in   {pokemon &&           pokemon.map((item) => (
– Waiz
                Oct 20, 2021 at 9:59
import Paper, { PaperProps } from "@material-ui/core/Paper";
interface TableEmployeeProps extends PaperProps {
        // your props
const TableEmployee: React.FC<TableEmployeeProps> = (props) => {
 return (
      <Paper  {...props}> </Paper>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.