State and Props, why this is not working?

JavaScript
#1

With this code I intend to show the string where is located in the state of Machine, in the h1 of Display:

const Display = props => {
  return (
    <h1 className="display" style={{color: "black", fontSize: 42 }}>{this.props.name}</h1>
  );
};


class Machine extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      name: "kickit"
    }
  }
  render(){
  return (
    <div className="machine">
      <Display name={this.state.name}/>
      <div id="grid-keys">
        <button className="drum-pad">Q</button>
        <button className="drum-pad">W</button>
        <button className="drum-pad">E</button>
        <button className="drum-pad">A</button>
        <button className="drum-pad">S</button>
        <button className="drum-pad">D</button>
        <button className="drum-pad">Z</button>
        <button className="drum-pad">X</button>
        <button className="drum-pad">C</button>
        </div>
      <p style={{color: "#006992", fontWeight: "bold"}}>DRUM MACHINE OF THE YEAR 2008</p>
    </div>
  );
  }
};


ReactDOM.render(<Machine/>, document.getElementById('root'))

However nothing gets rendered… I can´t see where is the problem. this.state.name is clearly “kickit”, and then this.props.name is clearly this: name={this.state.name}

So what is I´m missing?

#2

You already have access to your props by using props.name. This is because you’re already passing in the props are a parameter. You don’t have to write this.props.name.

1 Like
#3