Question: 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

```

Answer: 
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>
        );
    }

```
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