JavaScript React Basics Understanding State Create a Component as a Class

The code does not work. Where did I make a mistake?

const gracze = [

 {
    name: "Guil",
    score: 50,
    id: 1
  },
  {
    name: "Treasure",
    score: 85,
    id: 2
  },
  {
    name: "Ashley",
    score: 95,
    id: 3
  },
  {
    name: "James",
    score: 80,
    id: 4

  }

]



function Header(props) {

  return (

  <header>
    <h1>{props.title}</h1>
    <span className="stats"> Players: {props.playersNumber}</span>
  </header> 

);
}

const Player = (props1) => {
  return (
    <div className="player">
      <span className="player-name">
        {props1.name}
      </span>

      <Counter counter1={props1.score}/>
    </div>
  );
}

class Counter extends React.Component {
  render() {

    return (

      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <span className="counter-score"> {this.counter1} </span> 
        <button className="counter-action increment"> + </button>
      </div>

    );
  }  
}


const App = (alejazda) => {
  return (

    <div className="scoreboard">
      <Header 
            title="My Scoreboard" 
            playersNumber={alejazda.poczatkowigracze.length} 
       />

      {/* Players List */}
     {alejazda.poczatkowigracze.map ( gracz =>

      <Player 
          name={gracz.name} 
          score={gracz.score}
          key={gracz.id.toString()}
     /> 



      )}
    </div>
  );
}


ReactDOM.render(
  <App poczatkowigracze={gracze}/>,
  document.getElementById('root')

);

I specifically used different names to understand what is being passed where. Unfortunately Guil is uising the same name for props, name, score etc and at a later stage it becomes troublesome where I am passing what.

In order to understand props and component composition I wanted to use the different names but I am stuck at this point. The code stopped working when I changed the stateless function to a class component - I think, I am not sure. :D

The code brakes at line <span className="counter-score"> {this.counter1} </span>. So my question is, how to I display now the Counter component in Player and use the this.props.counter1 when there is not props in the class component.

Plox help

2 Answers

Shawn Casagrande
Shawn Casagrande
9,206 Points

Your problem is in your Counter class. It should be this.props.counter1 since the class is calling the props property where state is stored.

You can add console.log(this.props) just above the return in the render function to be able to see that info in the Chrome debugger console.

Ran Wang
Ran Wang
Full Stack JavaScript Techdegree Graduate 25,621 Points

Interesting question, tried to find answer but I failed, in console, I noticed that the counter elements have their counter1={num} property, which should be ok if referenced by {this.counter1}, but the UI does not show the number.

I cant help you, but I have posted your question on slack. Will give you feedback if someone is able to find the answer.