Unhandled Rejection (Typeerror): Cannot Read Property 'split' of Null Reactjs

If you've ever used JavaScript'southward dissever method, in that location'due south a good chance that you've encountered the post-obit error: TypeError: Cannot read property 'split' of undefined.

In that location are a few reasons why y'all would receive this error. Most likely information technology's just a bones misunderstanding of how split works and how to iterate through arrays.

For example, if you lot try to submit the following code for the Discover the Longest Word in a Cord challenge:

                part findLongestWord(str) {    for(permit i = 0; i < str.length; i++) {     const array = str.split(" ");     array[i].split up("");   } }  findLongestWord("The quick dark-brown play a joke on jumped over the lazy canis familiaris");              

it will throw the TypeError: Cannot read property 'split' of undefined mistake.

The separate method

When split is called on a string, it splits the cord into substrings based on the separator passed in as an statement. If an empty string is passed equally an argument, split treats each graphic symbol every bit a substring. It then returns an assortment containing the substrings:

                const testStr1 = "Test test 1 two"; const testStr2 = "cupcake pancake"; const testStr3 = "Showtime,Second,3rd";  testStr1.divide(" "); // [ 'Test', 'test', '1', '2' ] testStr2.split(""); // [ 'c', 'u', 'p', 'c', 'a', 'yard', 'e', ' ', 'p', 'a', 'n', 'c', 'a', 'chiliad', 'east' ] testStr3.split(","); // [ 'Outset', '2nd', 'Tertiary' ]                              

Check out MDN for more than details near split up.

The problem explained with examples

Knowing what the split method returns and how many substrings you can await is the fundamental to solving this challenge.

Let's take another look at the code above and see why information technology's not working equally expected:

                function findLongestWord(str) {    for(permit i = 0; i < str.length; i++) {     const array = str.split(" ");     assortment[i].split("");   } }  findLongestWord("The quick chocolate-brown trick jumped over the lazy dog");                              

Splitting str into an array like this (const array = str.split(" ");) works as expected and returns [ 'The',   'quick',   'dark-brown',   'fox',   'jumped',   'over',   'the',   'lazy',   'domestic dog' ].

But have a closer expect at the for loop. Rather than using the length of assortment as a condition to iterate i, str.length is used instead.

str is "The quick brown fox jumped over the lazy dog", and if you log str.length to the panel, you'll go 44.

The last argument in the body of the for loop is what's causing the error: array[i].carve up("");. The length of array is ix, then i would quickly go manner over the maximum length of array:

                function findLongestWord(str) {    for(let i = 0; i < str.length; i++) {     const array = str.split up(" ");     console.log(array[i]);     // array[0]: "The"     // array[ane]: "quick"     // array[two]: "chocolate-brown"     // ...     // array[9]: "dog"     // array[10]: undefined     // array[11]: undefined   } }  findLongestWord("The quick brown fox jumped over the lazy dog");                              

Calling array[i].split(""); to separate each cord into substrings of characters is a valid approach, only it volition throw TypeError: Cannot read property 'split' of undefined when it'south passed undefined.

How to solve Find the Longest Word in a String with split

Let's quickly get over some pseudo code for how to solve this problem:

1. Carve up str into an assortment of private words
2. Create a variable to track the greatest give-and-take length
3. Iterate through the array of words and compare the length of each word to the variable mentioned above
4. If the length of the electric current word is greater than the one stored in the variable, replace that value with the current word length
5. Once the length of every word is compared with the maximum word length variable, return that number from the function

First, split str into an assortment of private words:

                part findLongestWordLength(str) {   const array = str.dissever(" "); }              

Create a variable to keep track of the longest word length and set it to zero:

                part findLongestWordLength(str) {   const assortment = str.split(" ");   let maxWordLength = 0; }              

Now that the value of array is ['The', 'quick', 'brown', 'fob', 'jumped', 'over', 'the', 'lazy', 'dog'], you tin employ assortment.length in your for loop:

                part findLongestWordLength(str) {   const array = str.dissever(" ");   let maxWordLength = 0;      for (let i = 0; i < assortment.length; i++) {        } }              

Iterate through the array of words and check the length of each word. Call up that strings also have a length method you tin phone call to hands get the length of a string:

                function findLongestWordLength(str) {   const array = str.split(" ");   let maxLength = 0;      for (permit i = 0; i < array.length; i++) {     array[i].length;   } }              

Use an if statement bank check if the length of the electric current word (array[i].length) is greater than maxLength. If and so, supervene upon the value of maxLength with array[i].length:

                function findLongestWordLength(str) {   const array = str.split(" ");   let maxLength = 0;      for (let i = 0; i < array.length; i++) {     if (assortment[i].length > maxLength) {       maxLength = array[i].length;     }   } }              

Finally, render maxLength at the terminate of the part, after the for loop:

                office findLongestWordLength(str) {   const array = str.split(" ");   let maxLength = 0;      for (allow i = 0; i < array.length; i++) {     if (array[i].length > maxLength) {       maxLength = array[i].length;     }   }        return maxLength; }              

---

Learn to code for free. freeCodeCamp's open source curriculum has helped more than than 40,000 people get jobs equally developers. Get started

hutchensyeadeve.blogspot.com

Source: https://www.freecodecamp.org/news/cannot-read-property-split-of-undefined-error/

Share this post