React Checkbox Not Updating

As a solution to the YC Open Challenge #1, I created a web app using React. In short, the app is meant to show a paginated list of event attendees and have checkboxes for each attendee to check them in/out. The problem I am having is that when I switch through pages of attendees, the name and email of each attendee change but not the checkboxes (i.e. the checkboxes in all of the pages are just copies of the checkboxes on the first page). To see the effect, you can click here.

After doing some debugging I found that the elements themselves were getting the correct data, but for some reason they just didn’t update when changing pages, even though the name and email did. The code that should be doing this is in the constructor function:

this.state = { checkedIn: props.attendee['checkedIn'] };

Even though the value of props.attendee['checkedIn'] is true, the checkedIn property of the element is sometimes false, or vice versa.

The full code can be found at https://github.com/truered8-yc-open-challenges/challenge-one, and the app is being hosted at https://truered8-yc1.web.app. Any tips on how to solve this would be appreciated.

Does clicking (or changing) the checkbox trigger a method or function?

Is it possible that changing it accidentally triggers the same method or function?

I wish I was a better programmer :frowning: I’ll take a look at the code and see if anything jumps out.

Yes, I set it so that when you click the checkbox it calls a function that switches the checkedIn value. The function itself is working, it’s just that the checkboxes don’t get initialized with the correct value for some reason. I think it might just be a bug in the library I’m using for pagination.

The code related to this is in src/components/js, with EventAttendees.js initializing the list of attendees and EventAttendee.js having the class that contains each attendee’s name, email, and checked in status.

Have you checked if your toggleChecked method is actually updating the data on the API, or on the database?

Also, it definitely looks like a pagination issue. I can do a pattern (ie: in, out, out, out, in) and it stays even when you load a new page of people.

What’s the attribute or property name for the checked in/out? Check to see that you’re mapping that properly (elements?)

The method itself does update the data properly.

The checked in/out value is held in the checkedIn property of each attendee, and this value is initialized from the checkedIn property received from the API.

I’m almost certain that this is a bug in the library itself because there seems to be no other reason that the first page would load correctly but not any other page.

So, I don’t have a clue about React, but taking a look at this:

and there’s this bit:

render() {
    const a = this.props.attendee;
    return (
      <tr className="event-attendee">
        <td className="attendee-name">{a['name']}</td>
        <td>{a['email']}</td>
        <td><input type='checkbox' id='checkedIn'
        defaultChecked={this.state.checkedIn}
        onClick={() => this.toggleChecked(this.props.name, a)}/></td>
      </tr>
    );
  }

Which I assume is the code that displays the table. The input type is a checkbox, but you’re reading whether or not it’s checked by default with defaultChecked aren’t you?

Should that be checked={this.state.checkedIn} instead? Or perhaps even value={this.state.checkedIn} ?

Check out the reference here: https://www.w3schools.com/Jsref/dom_obj_checkbox.asp

defaultChecked returns the default value of the checked attribute. Whereas checked should set the current state of the checkbox?

Or am I barking up the wrong tree?

Thanks for the suggestion. I tried to use checked and value instead of defaultChecked, but unfortunately had the same result.

Technically the app still works because the requests still match the state of the checkbox, its just that the checkboxes don’t look right on load.

UPDATE: I got it to work. Changing defaultChecked to checked was part of the solution, but I also had to add another method, called componentDidUpdate, to update the checkboxes whenever this.state.checkedIn !== this.props.attendee['checkedIn']. Thanks!

Woohoo! Awesome!

Glad it’s working!