Here are a number of issues you may wish to explore:
- Firstly, in
highScoreData.js, we have a named export in the form
export const highScores = [ { ...
Since this is a named export as opposed to a default export, therefore the import statement must be adjusted accordingly.
For a named export,
// You wrote:
import highScores from './highScoreData';
// It should be:
import { highScores } from './highScoreData';
Alternatively, you could leave the import statement unchanged and instead edit highScoreData.js to do a default export,
const highScores = [ { ... ]
export default highScores;
See the documentation for more on named and default exports: export - JavaScript | MDN
-
In HighScore.js, you have a missing closing parenthesis. You are missing a closing parenthesis ) just before the very last curly brace. That is why in the Codebyte you posed for HighScore.js, there is a red error mark.
-
When we create an instance of a component and provide props at the time of instantiation, then those props are sent to the component in the form of an object. When you tried to create an instance of HighScore, you wrote:
<HighScore scoreData={highScores} />
The HighScore component will actually receive a props object in which one of the properties will be scoreData. To extract this property from the object and assign to a variable, we need to do object destructuring. In HighScore.js,
// You wrote:
function HighScore (scoreData) {
// It should be:
function HighScore ({scoreData}) {
This will find the props.scoreData property and assign it a variable called scoreData. Within the function, we can then simply use the variable scoreData to access the provided information. To learn more about Object Destructuring, have a look at: Destructuring assignment (in particular have a look at the section titled “Object Destructuring”).
// With Object Destructuring,
function HighScore ({scoreData}) {
// Without Object Destructuring,
function HighScore (props) {
scoreData = props.scoreData;
...
- In
HighScore.js, you are missing the return keyword,
// You wrote:
function HighScore ({scoreData}) {
scoreData. ...
// It should be:
function HighScore ({scoreData}) {
return scoreData. ...
- You chose to use the
forEach method to iterate over scoreData. But the forEach method’s
return value (see documentation) is undefined. The forEach method executes a function once for every element of the array. So, in your case for every array element of scoreData, it will create a Fragment consisting of <h3> and two <p> elements. And then just throw away the fragment without doing anything useful.
Instead of forEach, you want to use the map method. As the documentation explains, the map method’s return value is:
A new array with each element being the result of the callback function.
Therefore, using the map method on scoreData will result in an array of the form,
[ <> <h3>...</h3><p>...</p><p>...</p> </>,
<> <h3>...</h3><p>...</p><p>...</p> </>,
<> <h3>...</h3><p>...</p><p>...</p> </> ]
The map method will iterate over each element of the scoreData array, execute the callback function creating a Fragment, the Fragment will then be pushed to a new array. After the map method finishes, the new array (with fragments pushed to it) will be returned and then rendered by React.
- In
HighScore.js, you wrote:
// You wrote:
<h3>{score.userName}</h3>
// It should be:
<h3>{score.username}</h3>
// because in highScoreData.js, the property in the objects is named username.
Try making the above changes. If it works, good. If not, post your latest code either in Codebytes or as formatted code ([How to] Format code in posts).
) below.
) to up-vote the contribution!