React Unable to Change Checkboxes

Question

When I click on the checkboxes coming from an array with field isChecked nothing happens. the handleChange() apparently not working. Everything seems to map ok, because the checkboxes that are set to true or false initially show correctly. None of the fields showed up checked until I added isChecked= {network[i].isChecked}. But now i can't check or uncheck. Where did I mess up?

App.js

import React, {Component} from 'react';
import NetworkArray from './components/NetworkArray';
import {network} from './NetworkData'
import './App.css';
import 'tachyons';

class App extends Component  {

    constructor() {
    super()
    this.state = {
    network: network,
    searchfield:'',

}
this.handleChange=this.handleChange.bind(this);

}


handleChange(id) {
  this.setState(prevState => {
    const updatedNetwork = prevState.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())
  })

  return (

      <div>

         <NetworkArray 
             network={filteredNetwork}
             handleChange = {this.handleChange}  />
      </div> 

    )
}

}
export default App;

CardComponent

import React from 'react';

const Card = (props) => {

    return(
        <div className = 'bg-light-green dib br3 pa3 ma2 grow  shadow-5'>

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

NetworkArray.js

    import Card from './Card';

    const NetworkArray = ({network,handleChange}) => {
        const cardComponent = network.map((user,i) => {
            return(
            <Card 
                key = {network[i].id}
                name = {network[i].firstName + ' ' + network[i].lastName} 
                company = {network[i].company}
                phone= {network[i].phone}
                email={network[i].email}
                city = {network[i].city}
                isChecked= {network[i].isChecked}
                handleChange={handleChange}

                />

                        )
        })
            return ( 
                    <div> 

                     {cardComponent}


                    </div> 
                )
    }

    export default NetworkArray;

Answer 1

You need to pass an id prop to your Card component so that you have something to pass to props.handleChange:

<Card
  id={network[i].id}
  key={network[i].id}
  name={network[i].firstName + ' ' + network[i].lastName} 
  company={network[i].company}
  phone={network[i].phone}
  email={network[i].email}
  city={network[i].city}
  isChecked={network[i].isChecked}
  handleChange={handleChange}
/>