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

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 1

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