Tengo que hacer una modal dentro del cual hay que realizar una búsqueda e ir completando el input que se va generando.
La información la busco en un API, aquí esta el código:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor (props) {
super(props);
this.setState = {
users: [],
filteredUsers: []
};
}
componentDidMount () {
fetch('/users')
.then((resp) => resp.json())
.then((users) => {
this.setState({ users });
})
.catch(function(error) {
console.log(error);
});
}
search (e) {
let value = e.target.value;
// hace un filtrado del array de usuarios para obtener
// aquellos cuyo nombre contiene lo ingresado en el input
let filteredUsers = this.state.users.filter((user) => {
return user.name.includes(value);
});
// actualiza el estado y por ende, la tabla
this.setState({
filteredUsers
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add Note</h4>
</div>
<div className="modal-body">
<h5 className="modal-title">New Note </h5>
<input
type="text"
id="myInput"
name="search"
placeholder="Search.."
title="Type in a name"
onChange={this.search.bind(this)}
></input>
<table>
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Company</th>
<th>website</th>
</tr>
</thead>
<tbody>
{
this.state.filteredUsers.map((user) => (
<tr>
<td>{user.name}</td>
<td>{user.username}</td>
<td>{user.email}</td>
<td>{user.address}</td>
<td>{user.phone}</td>
<td>{user.company}</td>
<td>{user.website}</td>
</tr>
))
}
</tbody>
</table>
</div>
<div className="modal-footer">
Import: <input type="checkbox" id="myCheck"></input>
<button type="button" className="btn btn-default" data-dismiss="modal">Add Note</button>
<button type="button" className="btn btn-default" data-dismiss="modal">cancelar</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
En teoría el código lo que hace es que buscar los datos en el API e ir auto completando todo.
Funciona bien hasta que pongo el body de la tabla, cuando agrego ese bloque de código he intento correr el programa lo único que consigo es una pantalla en blanco y no se por que.
Al momento que quito ese bloque de código el programa corre perfecto.