Tengo una aplicación hecha en React que debería comportarse de la siguiente forma: pinta una lista de ciudades y debería alertar las que tienen problemas, para lo primero se consume un endpoint
que trae todas las ciudades posible y para el segundo punto se consume otro endpoint
que trae solo las ciudades que tienen problemas. Hasta ahí todo bien.
El problema es que tengo la lista de ciudades en mi state = { ciudades = [] }
y mi lista de ciudades con problemas en mi state = { errores = [] }
. Mi state ciudades[]
lo mapeo para pintar todas las ciudades y acá es el problema, como puedo conseguir otro Array basado en mi state ciudades y state errores con el que podre actualizar la lista de ciudades para que vayan cambiando de color.
state = {
ciudades: [],
errores: [],
}
componentDidMount() {
window.fetch('miurl_de_ciudades').then((response) => {
if (response.ok) {
response.json().then(jsonStr => {
const { datum } = jsonStr
this.setState({ciudades: datum})
})
} else {
console.log('Respuesta de red OK.')
//this.setState({servicesState: false})
}
})
.catch((error) => {
console.log('Hubo un problema con la petición Fetch:' + error.message)
//this.setState({servicesState: false})
})
this.timerID = setInterval(
() => this.handleSetInterval(),
5000
)
}
handleSetInterval() {
window.fetch('miurl_de_errores').then((response) => {
if (response.ok) {
response.json().then(jsonStr => {
const { datum } = jsonStr
this.setState({errores: datum})
})
} else {
console.log('Respuesta de red OK.')
//this.setState({monitoring: [], isLoading: false, isError: true})
}
})
.catch((error) => {
console.log('Hubo un problema con la petición Fetch:' + error.message)
//this.setState({monitoring: [], isLoading: false, isError: true})
})
}
render() {
return (
<div className="row">
<div className="col s12">
<div className="card">
<table>
<thead>
<tr>
<th>Host</th>
<th>Service</th>
<th>Status</th>
<th>Last Check</th>
<th>Status Information</th>
</tr>
</thead>
<tbody>
{this.state.ciudades.map((ciudad) => (
<tr key={watch.id}>
<td>
<span>{ciudad.attributes.name}</span>
<FontAwesomeIcon icon={faClock} size="2x" className="right u-mr-1" />
</td>
<td>{watch.attributes.nameTwo}</td>
<td>
// aca deberia ir mi data de errores para poder pintar las filas o poder indicar que tiene un error con un icono.
</td>
<td>...</td>
<td>...</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)
}
Intente crear un nuevo Array
con un Array.filter()
pero no me funciono, ya que me devolvía objetos vacíos...