TypeError: Cannot read property 'substring' of undefined in react

0
votes

I am trying to shorten a string in a react component I got from an API call in react but I get TypeError: Cannot read property 'substring' of undefined.

here is the snippet:

shorten(){
    let res = this.props.details.substring(100, 0);
    return res;
}

I am using the function in a render return function as:

    render(){
        return (
            <div>
                <p className="text-muted font1-1">{this.shorten()}</p>
            </div>
        );
    }

Error code:

TypeError: Cannot read property 'substring' of undefined
4
javascriptreactjs
Your details prop has no value. - Anarno
it has a value, I console logged to confirm. - Cuado
You got the value from an API. So your value, in the beginning, is undefined. After when the API comes back, you got the value, and you saw this result in console, but the first time when react renders your component the details prop has no value. - Anarno

4 Answers

2
votes

Get rid of the shorten method and try this

render(){
    const shorten = this.props.details ? this.props.details.substring(0, 100) : '';
        return (
            <div>
                <p className="text-muted font1-1">{shorten}</p>
            </div>
        );
    }
1
votes

did you tried to console.log the value of shorten? Do you get undefined in the console too?

if so, is it possible that you are not waiting for the API value.

Are you familiar with the concept of promise ? My hypothesis is that you get undefined because you are trying to see the result without have some async/await in place (or some other way to wait for the promise to be resolved), which means that you are trying to read the value before it actually exist, that is why you get the undefined

1
votes

Add a null check before use substring, like this: let res = this.props.details && this.props.details.substring(100,0);

1
votes

If you're sure that the prop is pass probably there's some state of the parent that causes this.props.details to be undefined.

Ther are 3 solutions.

  1. When you're passing the prop you can add a check
<YourComponent details={this.state.whatever || '' } />
  1. you can check it inside the component
let res = this.props.details && this.props.details.substring(100, 0);
  1. Don't render the component until all required props are passed and they're defined.