State and Props, why this is not working?

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 }}>{}</h1>

class Machine extends React.Component{
    this.state = {
      name: "kickit"
  return (
    <div className="machine">
      <Display 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>
      <p style={{color: "#006992", fontWeight: "bold"}}>DRUM MACHINE OF THE YEAR 2008</p>

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

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

So what is I´m missing?

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

1 Like