React: TypeError for split : Cannot read properties of undefined (reading 'split')

Question

I am trying to fetch data via apı and I kinda did it. However, I have problem wwith split. I tried everything but I got still this error. How can I Achive that?

edit: I installed this $npm add react-split and import it like so : import Split from 'react-split'. This is the usage of it in a code:

import React, {Component} from "react";
import { Link } from "react-router-dom";

 class PokemonDetail extends Component {
    constructor(props) {
    super(props);
    this.state = {
    name: '',
    imgUrl: '',
    pokemonIndex: '',
    
  };
}
componentDidMount() {
    const {name, url} = this.props;
    const pokemonIndex = url.split('/')[url.split('/').length - 2];
    const imageUrl = `https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`;
    
    this.setState ({
       name: name,
       imageUrl: imageUrl,
       pokemonIndex: pokemonIndex 
    });
}

TypeError: Cannot read properties of undefined (reading 'split') — Yasmins
– Yasmins, Commented Oct 11, 2021 at 20:53
if you console.log this.props you will see that there is no url — Tobias S.
– Tobias S., Commented Oct 11, 2021 at 21:00

Yasmins · Accepted Answer · 2021-10-12 02:24:08Z

5

I solved the problem by inserting question mark before split. I do not know the reason but it worked.

        const pokemonIndex = url?.split('/')[url?.split('/').length - 2];

Thanks all who responded my post.

answered Oct 12, 2021 at 2:24

Yasmins

611 silver badge7 bronze badges

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

1 Comment

display-name unset Over a year ago

The ? checks if the object is undefined. If url is undefined, then you cannot access the method split() on it. The ? asks, "Is url not undefined? if so, then .split() ... "

edhi.uchiha · Accepted Answer · 2021-10-12 01:00:28Z

0

Please make sure the parent component that call this PokemonDetail send the props with the same name.

Like this

class Pockemon extend Component {

render(){
   return (
     <>
       <PokemonDetail
          name='Pockemon name' // this line 
          url='the url' // and this line
       />

     </>
   )
}

}

answered Oct 12, 2021 at 1:00

edhi.uchiha

3742 silver badges9 bronze badges

Collectives™ on Stack Overflow

React: TypeError for split : Cannot read properties of undefined (reading 'split')

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related