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) {
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;


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}>
        ...
    </tr>
));

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