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

```
Since the error happens just before the API call is made, use optional chaining (`?.`) to check whether the string to be truncated is available yet.

```
let res = this.props.details?.substring(100, 0);

```