TypeError: Cannot read property 'substr' of null - React

Question

I have a code like this in React...

import React, { Component } from 'react';

class Card extends Component {
constructor(props) {
    super(props);
    this.state = {
        eventName: props.eventName,
        eventDate: props.eventDate,
        eventDesc: props.eventDesc,
        eventPic: props.eventPic
    }
}

render () {

    const { eventDate, eventDesc, eventName, eventPic } = this.state;
    return (
        <article className="br2 ba dark-gray b--black-10 dib ma3 mw5 shadow-hover">
            <img src={eventPic} className="db w-100 br2 br--top" alt={eventName} />
            <div className="pa2 ph3-ns pb3-ns">
                <div className="dt w-100 mt1">
                    <div className="dtc">
                        <h1 className="f5 f4-ns mv0">{eventName}</h1>
                    </div>
                    <div className="dtc tr">
                        <h2 className="f5 mv0">{eventDate}</h2>
                    </div>
                </div>
                <p className="f6 lh-copy measure mt2 mid-gray">
                    {eventDesc.substr(0, 140)}
                </p>
            </div>
        </article>
    )
}
}

export default Card;

The Problem I have is in this block code

{eventDesc.substr(0, 140)} // This is meant to limit the eventDescription's chars.

it gives me a TypeError: Cannot read property 'substr' of null.

Can you please help me how to overcome this error? Thank you

maybe you have nothing in eventDesc. check what you have in eventDesc — Akhil Aravind
– Akhil Aravind, Commented May 18, 2018 at 17:25
you're evidently passing in a null for the eventDesc prop. Either fix it so you're not passing in a null; or if you want to support nulls you'll need to modify Card to check for null before trying to do null.substr(0, 140) — Nicholas Tower
– Nicholas Tower, Commented May 18, 2018 at 17:25

Prince Hernandez · Accepted Answer · 2018-05-18 17:27:15Z

1

basically you are assigning a value to eventDesc with a default value of props.eventDesc. but if you are not passing that value(should be undefined) OR you are passing a null value you will get that behaviour.

you can add a default value on your render to solve this:

const { eventDate ="", eventDesc = "", eventName = "", eventPic = "" } = this.state;

but the best should be to have a default value ON the constructor so you do it only once:

constructor(props) {
    super(props);
    this.state = {
        eventName: props.eventName || "",
        eventDate: props.eventDate || "",
        eventDesc: props.eventDesc || "",
        eventPic: props.eventPic || ""
    }
}

answered May 18, 2018 at 17:27

Prince Hernandez

3,7411 gold badge13 silver badges20 bronze badges

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

2 Comments

Ricardo Sawir Over a year ago

thank you @princeHernandez your solution works. I still am trying to understand the whole concept though. ;-)

Prince Hernandez Over a year ago

@RicardoSawir if it works, mark it as the answer, also the problem was the accessing to a null variables, so you should check the parent component, it might be sending null props.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'substr' of null - React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related