React: Wie Meldung angezeigt wird, wenn das Ergebnis in 0 ist

Question

Wie wird angezeigt Nein Ergebnis Nachricht, wenn das Suchergebnis in map() leer ist?

export class Properties extends React.Component { 
    render() { 
     const { data, searchText } = this.props; 
     const offersList = data 
      .filter(offerDetail => { 
       return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0; 
      }) 
      .map(offerDetail => { 
       return (
        <div className="offer" key={offerDetail.id}> 
         <h2 className="offer-title">{offerDetail.title}</h2> 
         <p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p> 
        </div> 
       ); 
      }); 
     return (
      <main> 
       <div className="container"> 
        <h1>Main {offersList.length}</h1> 
        { offersList } 
       </div> 
      </main> 
     ); 
    } 
} 

Answer 1

Mit einem ternären Operator:

<main> 
    <div className="container"> 
    <h1>Main {offersList.length}</h1> 
    { offersList.length ? offersList : <p>No result</p> } 
    </div> 
</main> 

Answer 2

Wenn offersList Array leer ist, dann ist es Länge 0 gleich wird. Sie können einfache Bedingung machen:

<div className="container"> 
    <h1>Main {offersList.length}</h1> 
    { offersList.length ? offersList : <p>No Result</p> } 
</div>