WM5 | AISHA_ATHMAN_LALI | MODULE_REACT | HIGH_SCORES_TABLE | LEVEL 1 & 2

[aishaathmanlali]

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

This is a PR for the High-Scores Table challenge. I have completed level one where I have displayed the given data in tables as requested in the instructions

Questions

I am still struggling with the table. Is there a better way to go about it?

[JackRogers9]

This may have been left in by accident, because I can't see where it is being used.

[JackRogers9]

I would consider removing the default attribute from your export as it is considered a bad practice by most developers. There are multiple reasons for this by a common one is the variable/function name could differ between files and cause confusion if changes are made.

Instead of an import such as

import allCountryScores from "../scores.js"

It would look like

import { allCountryScores } from "../scores.js"

Any variables/functions etc that are referenced inside braces {}, need to match the declaration in the file you are importing from, improving the consistency of your naming.

If you tried to do

import { nothing } from "../scores.js"

It would fail as there are no variables/functions named nothing in scores.js.

[JackRogers9]

Also, your export can be moved onto the same line as your declaration of your variable, so line 65 is not necessary, the same can be achieved by moving 'export' or 'export default' to line 1.

This would look like

export let allCountryScores = []

Or since const would be more appropriate here export const allCountryScores = []

[JackRogers9]

Great Job!

If you wanted another challenge I would encourage you to look into importing individual components, this will be crucial when you start working with larger files.

Here is an article from the React team on this area https://react.dev/learn/importing-and-exporting-components

This can help in a few areas:

1. Allow you to create reusable components without duplicating code.
2. Cleanup larger files and make your code easier to read.

To use your work as an example, your App function could be refactored to look like:

function App() {
  allCountryScores.sort(byName);

  return (
    <>
      <h1> HIGH SCORES PER COUNTRY </h1>

      {allCountryScores.map( ( country, index ) => (
        <ScoreTable country={country} index={index} />
      ) )}
    </>
  );
}

[JackRogers9]

Unused import