How to show 3 different results for searches in the input field? in React?

0

How can I display one of the 3 search options in the Search bar of my nput field?

Based on different inputs I need to show:

A-If the {query} is '' (empty): I would like to display the text 'Search your Owner'

B-If the {query} is not empty, but still different from the search for my list: I would like to show the text 'Owner not found'

C-E If the {query} is not empty, but is equal to the search object of my array {condos}, show the HTML in the {list}.

 import React from 'react';
 import ReactDom from 'react-dom'

 export default class CondoSearch extends React.Component {
 state={
  query:''
 }
 updateQuery = (query) =>{
  this.setState(()=>({
    query: query
  }))
 }

render(){
  const { query }=this.state
  const {condos, onDeleteCondo}=this.props

 const condoAlert = (query!==condos)?'Busque o seu 
 condomínio':'Condomínio não encontrado'


  const showingCondos = condos.filter((c) =>
  c.name.toLowerCase().includes(query.toLowerCase())
 )

 return(
  <div>
    <form>
      <input
        type='text'
        value={query}
        placeholder='Procurar Condomínio'
        onChange={(event)=>this.updateQuery(event.target.value)}
        />
    </form>
    <div>
    {condoAlert}
    </div>
    <ol> {
        showingCondos.map((condo)=>
            (<li key={condo.address}>
                <p>{condo.name}</p>
                <p>{condo.cep}</p>
                <p>{condo.address}</p>

              <button
                onClick ={()=>onDeleteCondo(condo)}>
                Remove
              </button>
            </li>
          ))}
          </ol>
    </div>

  )
 }
 }
    
asked by anonymous 07.10.2018 / 22:05

0 answers