ReactJS: Functional component with props defined as Array but seen as Object

Question

When rendering <MyComponent {...docs} />, I kept the following error:

TypeError: docs.map is not a function

Here is how I am rendering <MyComponent /> from a parent class based component:

import * as React from 'react'
import IDoc from '../types/IDoc'

class Doc extends React.Component
{
   public render()
   {
      const docs : IDoc[] = Defs.getDef();
      // Example of map working (not doing anything just for an example)
      docs.map(x => x);

      return (
         <div>
            <MyComponent {...docs} />
         </div>
      )
   }
}

For some reason when I pass the docs array to the functional <MyComponent/> component, its not seen as an array. I need to convert it to an Array before using .map() which I would prefer to avoid:

import * as React from 'react'
import IDoc from '../types/IDoc'

// docs is an array isn't?
function MyComponent(docs : IDoc[] )
{

   if (Array.isArray(docs) === false)
   {
     //Its not seen as an array so falls into this 
      return (
         <div>
            { Object.keys(docs).map((index) => {
               const doc : IDoc = docs[index];
               const name = doc.name;
               return (
                  <div>{name}</div>
               )
               })
            }
         </div>
      )
   }else
   {
      // what I expected to work but it throws the error
      return (
         <div>
            { docs.map((doc) => {
               return (
                  <div>{doc.name}</div>
               )
               })
            }
         </div>
      )
   }
}

I thought as I defined docs props as IDocs[] it would have been seen as an array due to the square brackets.

The workaround above works, but obviously I don't want to do this every time I use an array function like map(). I am new to React so would appreciate any pointers. I used create-react-app my-app --scripts-version=react-scripts-ts in case that is helpful.

Dacre Denny · Accepted Answer · 2019-04-06 22:06:13Z

4

Currently you're spreading the elements of the docs array into the props of MyComponent by doing this:

<MyComponent {...docs} />

Consider revising your MyComponent function so that docs is accessed via it's own prop. This would mean accessings docs via the props object passed to the MyComponent functional component like so:

/* Add props argument, where docs array is an entry of props */
function MyComponent(props : { docs : IDoc[] }) {
    const { docs } = props;

    /* You can now use docs as before 
    if (Array.isArray(docs) === false)
    */
}

This change would require that in your Doc component, the MyComponent component is rendered by passing docs as a prop (rather than spreading the elements of the docs array directly into the props of MyComponent) by doing the following:

  return (
     <div>
        {/* Don't spread docs, but instead pass docs via docs prop */}
        <MyComponent docs={docs} />
     </div>
  )

Hope this helps!

edited Apr 6, 2019 at 22:06

answered Apr 6, 2019 at 21:58

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

1 Comment

user3210699 Over a year ago

Thanks very much @DacreDenny I have converted and that worked perfectly. You replied within 12 mins of me posting the question, it took me longer to write the question and longer still to try and solve it myself!

Collectives™ on Stack Overflow

ReactJS: Functional component with props defined as Array but seen as Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related