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

```
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 || '' } />

```

2. you can check it inside the component

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

```

3. Don't render the component until all required props are passed and they're defined.