Warning: session_start(): open(/tmp/sess_2a9163a5c197dec93734caf570aa00fc, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to fix the TypeError: map() is not a function In React - LearnShareIT

How to fix the TypeError: map() is not a function In React

TypeError: map() is not a function in React

Check out the information in this post. You will find the detailed instruction for the TypeError: map() is not a function in React. To avoid this error, you must make sure that you use the map() method on an array value. Let’s learn more about the cause and the most suitable approach to this problem.

Why do we have this error?

First, we have to know what causes you to get the error message: “TypeError: map() is not a function“. Look at the following example, it will throw this error:

export default function App() {
 
const myChild = {name: 'Kai', age: 12};
 
  return (
    <div>
      {myChild.map(item => {
        return <h2>{item}</h2>;
      })}
    </div>
  );
};

Output:

The reason you receive this error message is that you are applying the map() method to a non-array object.

In JavaScript, the map() method creates an array by calling a specific function on each element contained in the parent array. So you cannot arbitrarily call the map() method without knowing the type of that object.

Solution for the TypeError: map() is not a function in React

The simplest way to avoid this error is to use the map() method on an object that is an array, like the following example:

export default function App() {
 
  const friends = ['Celina','Nick','James','Tayor','Paul']
 
  return (
   
    <div>
      { friends.map(item => {
          return <h2>{item}</h2>;
        })
      }
 </div>
  );
};

However, if you don’t know whether the value is really an array or not, you can use the Array.isArray() method to check.

export default function App() {
 
  const myChild = {name: 'Kai', age: 12};
 
  return (
   
    <div>
      { Array.isArray(friends)
        ? friends.map(item => {
          return <h2>{item}</h2>;
        })
        : console.log('Object is not an array')
      }
    </div>
  );
}; 

In this example, the ternary operator is used for conditional rendering. In case the value is an array, the map() method will be called. Otherwise, you will get a message: “Object is not an array“.

In another case, you have an array-like object that you try to convert to an array before calling the map method using the Array.from() method.

export default function App(){
  const friends = new Set(['Timmy', 'Carl', 'Jenny']);
 
  return (
    <div>
      {Array.from(friends).map(element => {
        return (
          <div key={item}>
            <h2>{item}</h2>
          </div>
        );
      })}
    </div>
  );
  };

We convert the value to an array before calling the map method. You can apply this approach to NodeList, which is returned when you call the getElementsByClassName method.

In case you work with an object, you will not be able to use the map() method to iterate through all the elements in the array because map() is only usable with array values.

At this point, you can use method Object.keys() to get the array of keys or method Object.values() to get the array of values ​​of that object.

export default function App() {
 
  const myChild = {
    name: 'Kai',
    age: 12,
  };
 
  return (
    <div>
      {/*iterate over an object's array of keys*/}
      {Object.keys(myChild).map((key) => {
        return (
          <div key={key}>
            <h2>
              {key}
            </h2>
          </div>
        );
      })}
 
      <br />
 
      {/*iterate over an object's array of values*/}
      {Object.values(myChild).map((value, idx) => {
        return (
          <div key={idx}>
            <h2>{value}</h2>
          </div>
        );
      })}
    </div>
  );
}

Summary

In conclusion, we have explained to you what causes the TypeError: map() is not a function in React. To avoid the error, you must call the map() method on an array object. Hopefully, the information in this article will help you.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *