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