CODEWITHSUNDEEP
reactjscomponentsinclude
amit
amit

Reputation: 81

TypeError while using 'includes' function

Im writing a web page in React.

I call to API and everything is working well. I have a property of 'Error' in my json response from the request.

the end of the component:

 const er = data.Error
        return <p> {er} </p>

and I can see the correct error message on the web page.

but when I'm write something like this:

if(data.Error.includes('specific error message...')
        return <p> 'specific error message...' </p>

I got the following message:

TypeError: Cannot read properties of undefined (reading 'includes')

the all component:

import React from "react";
import Movie from "./Movie";
import { useEffect, useState } from 'react';


export default function MovieList({searchValue}) {
    const [data, setData] = useState([])
    //Onmount
    useEffect(() => {
        async function init() {
      //API Calls- request data from the server
        const response = await fetch('http://www.omdbapi.com/?apikey=ca0aa516&s=' + searchValue);
        const body = await response.json();
        setData(body);
     }
    init()
    
     }, [searchValue])

     console.log(data)
    if(data.Search) {
        return (
            <div className="container-fluid movie-app" >
                <div className="row">        
                    { 
                          data.Search.map((movie) => {    
                            return (
                                <Movie link={movie.Poster} />
                                )
                        })
                    } 
                </div>
            </div>
              
        )
    }
   
    const er = data.Error
    
        return <p> {er} </p>
    
  }

Upvotes: 0

Views: 448

Answers (1)

Farzaneh Torkpichlou
Farzaneh Torkpichlou

Reputation: 2496

You have to make an edit:

if(data?.Error?.includes('specific error message...'))

or

if(data.Error && data.Error.includes('specific error message...'))

Upvotes: 1

Related Questions