score:2

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

score:1

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

score:1

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

score:1

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.

score:1

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

Related Query

More Query from same tag