Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Introducing Props Iterating and Rendering with map()

Seth wright
Seth wright
952 Points
Posted by Seth wright
Seth wright
952 Points

DOM rendering in separate file on Visual Studio... how can I access the array?

I am trying to follow along on Visual Studio so that I have practice in a real world IDE. When you create a react app in Visual Studio an Index.js file is created that contains the DOM rendering and then an App.js file is created that contains the top level App component. I have also created all other components in the App.js file.

My Index.js file looks as follows

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { players } from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App initialPlayers = {players}/>
  </React.StrictMode>
);

In the App.js file, I declared the array at the top like in the tutorial, and then declared the App component as follows:

function App(props) {
  return (
    <div className="scoreboard">
      <Header title="Scoreboard" totalPlayers={1} />{" "}
      {props.initialPlayers.map((players) => (
        <Player name={props.name} score={props.score} />
      ))}
    </div>
  );
}

The IDE is telling me that players is declared but never used. How is my code unreachable? How would I be able to effectively export the props from the App.js file and reference them from the Index.js file? If this isn't possible or best practice, what do you recommend doing to follow along with this tutorial in Visual Studio. I have tried putting the DOM rendering in the App.js file and deleting Index.js, but I am getting the same warning about my players in the arrow function in the App component being accessed but not declared, so I think there is another issue.

I am not sure what is failing, but when I run the code, despite it compiling, all I render is is a white screen.

Thanks in advance for your help!

Seth wright
Seth wright
952 Points
Seth wright
Seth wright
952 Points

Thanks for the help Lorenzo. That was definitely a typo and fixed the fact that my players array was declared but never used.

However, the Player and Counter components are not rendering. My App and Header components are rendering, but when I inspect the preview page the Player and Counter components are not there.

My updated App component looks as follows:

function App(props) {
  return (
    <div className="scoreboard">
      <Header 
      title="Scoreboard" 
      totalPlayers={1} 
      />

      {props.initialPlayers?.map(players => 
        <Player                                               
        name={players.name}                       
        score={players.score} 
        />
      )}
    </div>
  );
}

A note on this code block: I was getting an error from the map function, but after Googling, someone else fixed the issue by only mapping if the array existed: hence the ? after the array name

My Player component looks like this: 

const Player = (props) => {
  return (
    <div className="player">
      <span className="player-name"> {props.name} </span>
      <Counter 
      score={props.score} 
      />
    </div>
  );
};

The Counter component looks like this:

function Counter(props) {
  return (
    <div className="counter">
      <button className="counter-action decrement"> - </button>
      <span className="counter-score">{props.score}</span>
      <button className="counter-action increment"> +</button>
    </div>
  );
}

My default export at the bottom of the page is App. The Index.js file has not changed. Can someone please help explain why my Player and Counter components are not rendering?

Thanks!!

1 Answer

Lorenzo Street-Simmons
Lorenzo Street-Simmons
5,944 Points
Lorenzo Street-Simmons
Lorenzo Street-Simmons
5,944 Points

Its because you're using props.name and props.score. You need to reference the array using players.name and players.score. 

{props.initialPlayers.map( player =>
        <Player 
      name={player.name}
      score={player.score}
      />
      )}