JavaScript React Basics Understanding State Create a Component as a Class

Ula Troc
Ula Troc
1,879 Points

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')

);
Ula Troc
Ula Troc
1,879 Points

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

1 Answer

Ran Wang
Ran Wang
Full Stack JavaScript Techdegree Student 21,643 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.