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

You got the value from an API. So your value, in the beginning, is undefined. After when the API comes back, you got the value, and you saw this result in console, but the first time when react renders your component the details prop has no value. — Anarno
– Anarno, Commented May 14, 2020 at 10:55

Ignacio Elias · Accepted Answer · 2020-05-14 10:57:02Z

4

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

answered May 14, 2020 at 10:57

Ignacio Elias

5984 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Mole · Accepted Answer · 2022-06-12 22:33:45Z

3

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

edited Jun 12, 2022 at 22:33

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Jun 9, 2022 at 9:37

Njoroge Brian

3071 gold badge5 silver badges12 bronze badges

Comments

Anarno · Accepted Answer · 2020-05-14 10:57:46Z

2

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

answered May 14, 2020 at 10:57

Anarno

1,64012 silver badges20 bronze badges

1 Comment

Cuado Over a year ago

Thank you, now I know I have to check for null because of how React renders.

Consuelo Sanna · Accepted Answer · 2020-05-14 10:57:43Z

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

answered May 14, 2020 at 10:57

Consuelo Sanna

2461 gold badge3 silver badges9 bronze badges

2 Comments

Cuado Over a year ago

the value from the console.log of the shorten value works as expected. Apparently I have to check for null value first. Thank you.

Consuelo Sanna Over a year ago

Yes that too, because of the React Lifecycle The important thing is that you got the solution, have a nice day =)

Robert · Accepted Answer · 2020-05-14 10:59:39Z

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.

When you're passing the prop you can add a check

<YourComponent details={this.state.whatever || '' } />

you can check it inside the component

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

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

answered May 14, 2020 at 10:59

Robert

20.3k6 gold badges58 silver badges85 bronze badges

1 Comment

Cuado Over a year ago

Thanks, I followed a similar solution. Problem solved.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related