Uncaught TypeError: Cannot read properties of null (reading 'slice') using react class based component

Question

I am learning react and i was trying to make a react class based component in which i am trying to fetch data from articles array that has data of news articles such as title,description, urlToimage, url. i was trying to cut short the title and description string to a maximum length of 40 and 80 respectively and i tried doing this with the use of slice as you can see but met with the error mentioned below. I also made sure that the title and description are of string or array datatypes to avoid any datatype incurred errors both title and description are written as "title" : "content inside". Rest of the code was running fine without slice and was showing all the data as intended. I don't know if the syntax have changed or not as i am following a tutorial from 2021.

{this.state.articles.map((elements) => {
            let title = elements.title;
            let description = elements.description;
           
            return <div className="col-md-4 my-3" key={elements.url}>
              <NewsItem title={title.slice(0,45)} description={description.slice(0,80 )} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
            </div>
          })}

react-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of null (reading 'slice')

console.log elements.title and you will see if the title is there or not and then you can do like `title = elements.title || 'defult value'` so if the value is undefined. — PakDragoon, Sep 22 '22 at 06:15

score 0 · Answer 1 · answered Sep 22 '22 at 06:06

Possibly the title you're getting in response is undefined.

{this.state.articles.map((elements) => {
  let title = elements?.title || ""; // Either this approach
  let description = elements?.description || ""; // Either this approach

  return <div className="col-md-4 my-3" key={elements.url}> // Or use optional chaining 
    <NewsItem title={title?.slice(0,45)} description={description?.slice(0,80 )} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
  </div>
})}

You can either use or(||) operator to initialize title as an empty string or use optional chaining as shown in example.

score 0 · Answer 2 · answered Sep 22 '22 at 06:09

The issue here is that one or all of the articles in your state contain description or title as null. This is why you are getting this error message Uncaught TypeError: Cannot read properties of null (reading 'slice')

Simply add null/undefined check before slicing and it should work.

If you use optional chaining this can be achieved as below.

{this.state.articles.map((elements) => {
            let title = elements.title;
            let description = elements.description;
           
            return <div className="col-md-4 my-3" key={elements.url}>
              <NewsItem title={title?.slice(0,45)} description={description?.slice(0,80 )} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
            </div>
          })}

Or for without optional chaining

{this.state.articles.map((elements) => {
                let title = elements.title;
                let description = elements.description;
               
                return <div className="col-md-4 my-3" key={elements.url}>
                  <NewsItem title={title?title.slice(0,45):""} description={description ? description.slice(0,80 ) : ""} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
                </div>
              })}

Uncaught TypeError: Cannot read properties of null (reading 'slice') using react class based component

2 Answers2