Passing Props with Functional React Components


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

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

  <DrumMachine />,

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!