I'm getting an array of users from a database table called users. One of the fields is a checkbox with a default of false. I'm not able to change the checkbox. When I got the array from a static page it worked fine, but not working after fetching from database. The handleChange function is what I'm using to change checkboxes. The array that comes back from componentDidMount is like this:
{
"id": 455,
"firstname": "Sally",
"lastname": "Sue",
"company": "Baltic Explorations",
"city": "houston",
"phone": "2058231111",
"email": "[email protected]",
"ischecked": false
},
App.js
class App extends Component {
constructor() {
super()
this.state = {
network: [],
networkfilter:[],
suggest:suggest,
searchfield:'',
searchsuggest:'',
route:'signin',
routed:false,
isSignedIn:false,
user: {
id:'',
firstname: '',
lastname: '',
phone:'',
city:'',
email:'',
company:'',
ischecked:false
}
}
this.handleChange=this.handleChange.bind(this);
this.handleClick=this.handleClick.bind(this);
}
componentDidMount() {
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(data => {
this.setState({network:data})})
}
loadUser = (data) => {
this.setState({user: {
id:data.id,
firstname: data.firstname,
lastname: data.lastname,
phone: data.phone,
city:data.city,
email:data.email,
company:data.company,
ischecked:data.ischecked
}})
}
onSearchChange=(event)=> {
this.setState({searchfield:event.target.value})
}
onSuggestChange=(event)=> {
this.setState({searchsuggest:event.target.value})
}
handleChange(id,route) {
const updatedNetwork = network.map(netw => {
if (netw.id===id) {
netw.ischecked = !netw.ischecked
}
return netw
})
return {
network:updatedNetwork
}
}
render() {
const filteredNetwork = this.state.network.filter(netw => {
return netw.lastname.toLowerCase().includes(this.state.searchfield.toLowerCase())
})
const filteredSuggestions = this.state.suggest.filter(sugg => {
return sugg.location.toLowerCase().includes(this.state.searchsuggest.toLowerCase())
})
return (
<div className = "tc">
<Navigation
isSignedIn ={this.state.isSignedIn}
onRouteChange={this.onRouteChange}
routed={this.state.routed}
/>
{
this.state.route==='home' ?
<div>
<h2 className = "ml6">All Network</h2>
<Searchbox
searchChange = {this.onSearchChange}
onRouteChange = {this.onRouteChange}
routed={this.state.routed}
/>
<NetworkArray
network={filteredNetwork}
handleChange = {this.handleChange}
handleClick ={this.handleClick}
selectedCard={this.state.suggest}
onRouteChange = {this.onRouteChange}
/>
</div>
: (
this.state.route==='mynetwork' ? (
<div>
<h2 className = "ml6">My Network</h2>
<Searchbox searchChange = {this.onSearchChange}
/>
}
<MyNetworkArray
handleChange = {this.handleChange}
network = {filteredNetwork}
/>
... moreComponents loaded here removed for brevity
export default App;
Card Component
import React from 'react';
const Card = (props) => {
return(
<div className = 'pointer bg-light-green dib br3 pa3 ma2 grow shadow-5'
onClick = {() => props.handleClick(props.id)}>
<div>
<h3>{props.name}</h3>
<p>{props.company}</p>
<p>{props.phone}</p>
<p>{props.email}</p>
<p>{props.city}</p>
</div>
<div>
My Network
<input className ="largeCheckbox"
type = "checkbox"
checked={props.ischecked}
onChange={()=> props.handleChange(props.id)}
/>
</div>
</div>
)
}
export default Card;
How can I go about updating the checkboxes, and that when user logs in, it keeps track of the checkboxes that particular user has checked?
handleChange(id, route) {
const updatedNetwork = network.map(netw => {
if (netw.id === id) {
netw.ischecked = !netw.ischecked;
}
return netw;
});
return {
network: updatedNetwork
};
}
This should be giving you all kinds of errors, as network is undefined. Is it possible you were using a global or imported value to provide a dummy server response, then forgot to change it to component state? I'd expect to see a reference to this.state.network.