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