Search Page using React - Need a "No results found" message-CodePudding

I am working with the following code. It is a movie search page. It works fine but when I put the name of a movie that does not exist, it shows me a blank page (thanks to the [] in line 8). I would like it to show me a "No results found" message. Can someone help me with the code? I am working with React in the frontend part of a project.

import React from 'react'
import Card from './Card'

const CardList = ({ results }) => {

    let data = [];
    if(results.data) {
        data = results.data.Search || [];
    }


  return (
    <section className='container'>

    <div className='row justify-content-center'> 
        
            {data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            ))}
        
    </div>
    </section>

  )
}

export default CardList

CodePudding user response：

You can just add a

{
data.length!=0 ? 
data.map((item) => (
                <Card key={item.imdbID} movie={item}/>
            )) 
:
<div>No Results Found!</div> // here you could pass any component to show no results found message
}