0

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">&times;</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.

9
  • ¿Qué muestra la consola?
    – gugadev
    Commented el 5 feb. 2017 a las 18:07
  • el programa tiene que ir auto completando lo que el usuario va colocando en la barra de búsqueda
    – lewa14
    Commented el 5 feb. 2017 a las 18:11
  • Te pregunté qué muestra la consola. Cuando se tiene un renderizado en blanco generalmente se debe a errores. ¿No acostumbras a mirar la consola?
    – gugadev
    Commented el 5 feb. 2017 a las 18:13
  • Otra cosa, cuando preguntes escribe un título que describa el problema. Así en los resultados de búsqueda aparecerá esta pregunta si alguien busca un problema similar.
    – gugadev
    Commented el 5 feb. 2017 a las 18:16
  • no sale nada en consola solo un warning que no tiene que ver con la llama realizada en el body de la tabla
    – lewa14
    Commented el 5 feb. 2017 a las 18:18

2 respuestas 2

0

Nota: El problema es por causa mía. En tu pregunta anterior cometí este error tipográfico al publicar mi respuesta de forma apurada.

El problema está en el constructor:

constructor (props) {
  this.setState = { // incorrecto
    users: [],
    filteredUsers: []
   };
}

Cuando se inicializa el estado, se hace asignando directamente los valores. El método setState se usa solo para actualizar el estado. Cuando no hay un estado inicializado, el método setState no es alcanzable (básicamente, no existe en el componente). Además, lo que tienes es un error tipográfico.

constructor (props) {
  this.state = { // correcto
    users: [],
    filteredUsers: []
   };
}

El map, contrario a lo que te dicen en la otra respuesta es correcto porque una función de flecha con una sola expresión puede omitir el return. En caso usases llaves ({}), sí tendrías que añadir el return.

Además, se puede mejorar el método search un poco más. Por ejemplo, puedes usar trim para eliminar espacios a los extremos del texto ingresado ya que, si no se hace, al ingresar un espacio todos los usuarios se harían visibles. También, en caso se borre todo lo ingresado, se debe retornar false y ocultar todos los usuarios.

search (e) {
  // 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) => {
    let enteredText = e.target.value.toLowerCase().trim();
    let name = user.name.toLowerCase();

    if (!enteredText.length) {
      return false;
    }
    return name.includes(enteredText);
  });

  // actualiza el estado y por ende, la tabla
  this.setState({ filteredUsers });
}

He hecho un Pen para que veas el ejemplo funcional.

-1

El método map pasa por todos los valores de un array y cambia lo que entra por lo que regreses en el return, tu método que usas para el map no tiene un return, por lo que cada elemento es null, eso no te dará error ni te presentará nada en el render.

1
  • 2
    Las funciones tipo flecha de una sóla expresión (como en este caso) no necesitan return.
    – ezakto
    Commented el 6 feb. 2017 a las 7:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.