lewa14 lewa14 - 4 years ago 104
HTML Question

Javascript, html and react js. error in calling this.state.filteredUsers.map ((user)

I have to make a modal within which I have to perform a search and complete the imput that you give me. The information I look for in an api, here is the code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
constructor (props) {
this.setState = {
users: [],
filteredUsers: []

componentDidMount () {
.then((resp) => resp.json())
.then((users) => {
this.setState({ users });
.catch(function(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

render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.

<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 className="modal-body">
<h5 className="modal-title">New Note </h5>
title="Type in a name"

this.state.filteredUsers.map((user) => (

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




export default App;

In theory the code should do is find the info in the api and go autocompleting, everything works fine until I put the body of the table, when I add that block of code I try to run the program the only thing I get is a white screen and I do not know why.

To the moment that I remove that block of code the program runs perfect

What is happening in that block of code that does not render anything?

Answer Source

The first thing I see is that you don't have a key attribute in your loop elements, it should be something like this:

this.state.filteredUsers.map((user, index) => (
    <tr key={index}>

Also bear in mind that react will not guarantee that the state will be updated immediately:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. react docs

This here is a great article that could help you understand more the problem. 3 Reasons why I stopped using React.setState

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download