Finished Camper Leaderboard using ReactJS

Hello guys,
I learned React and I wanted to try out the create-react-app so I have done the Camper Leaderboard project using it. I designed it using material-ui.
I tried to implement the components’ idea in my project the best I could. My next step is learning more complex React designing style, Redux and eventually MeteorJS.
The code is public on GitHub here:


And the website is here:
https://60noy.github.io/FCC-Camper-Leaderboard/
I would really appreciate if you have a look and tell me what you think of the project and where I could improve it.

Props to wrangling with webpack. It should be possible to export the bundle and host to GitHub Pages. Adding a live demo would be a nice touch for potential employers looking at your GitHub.

It would be a good exercise to break out the toggle into its own component, then pass the toggleHandle into it as a callback property.

Going further, you can add ascending and descending sort functionality, which could be toggled by table heading.

1 Like

Thanks, I am generating a bundle right now.
By breaking the toggle into its own component I have done this:

  • Created ToggleButton.js file to represent a toggle

    export class ToggleButton extends Component {
    render() {
    return (




    );
    }
    }

Now I am pretty confused about where should I pass the togglehandle and change the toggle. Could you be more specific please?

You want to have the handler in the component that contains your state. In this case, the Main component.

Oh wait, you’ve already done that in the original code through Material UI’s Toggle component, my bad.

I would change your handleToggle function to this instead, though:

handleToggle() {
    this.setState({isToggled: !this.state.isToggled});
}

So then you don’t need to pass the event object in.

1 Like

Thanks, I’ll do that.
Successfully published to GitHub pages:
https://60noy.github.io/FCC-Camper-Leaderboard

1 Like