Passing Props with Functional React Components

Background

I’m attempting to learn how functional components work and pass information to each other, and I think I’m completely lost.

I set up a very simple start to a single-page app:

const Pad = (props) => {
  return (
    <button className='pad'>
      {props.key}
    </button>
  );
}

const DrumMachine = () => {
  return (
    <div>
      <Pad key="test" />
    </div>
  );
}

ReactDOM.render(
  <DrumMachine />,
  document.getElementById('drum-machine')
);

However, the app doesn’t display the “test” prop that I passed from the parent DrumMachine component to the child Pad component.

I feel like I’m missing something very simple here, but I’ve been staring at this for about two hours and have been going round and round Googling my way to insanity :slight_smile:

I’m getting pretty frustrated and exasperated. I would greatly appreciate any help.

Key is a special word in react. Try something else.

1 Like

I had a feeling it was something silly :flushed: Thanks for providing a sanity check, @jenovs!