Passing props to components in React

JavaScript
1

Tell us what’s happening:
Hello everyone. In order to complete the Drum Machine test, I’m trying to create a React Component that will act as a dummy button that I can fill with the key and soundclip I need. To do this, I’m trying to pass a key props to my Button component. I am doing the way I think I’m supposed to, but I end up with an empty buton, with no “Q” inside it. What am I doing wrong ?

Your code so far

const Button = (props) => {
  return (
    <div id="display">
      <button>{props.key}</button>
    </div>
  );
};

class Test extends React.Component {
  render() {
    return (
      <div id="display">
        <p>"Dummy text"</p>
        <Button key="Q" />
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("drum-machine"));

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14324.62.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.77 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

2

After trying to copy-paste a prop-passing exemple from the net, it turns out props just flatout do not work in my codepen. When I try to console.log(props), I’m met with an empty object. Can anyone troubleshoot this ?

3

OK, so, after fooling about a bit, it tirns out that changing the props name from key to ky made it work. I have no idea at all why, though.

4

Because key is a reserved word in React and it has special meaning. You can’t use it as your own prop.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.