How To Pass State From Child to Parent Component

Good morning,

In the following code, I’m wanting to have it so that when I click a button on the screen or a key in real life, it changed the JSX to show what I have clicked. I figured the following was a good way to do this:

const sounds = [
  {
  key: 'Q',
  tune: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    key: 'W',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  },
    {
    key: 'E',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },
    {
    key: 'A',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  },
    {
    key: 'S',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  },
    {
    key: 'D',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  },
    {
    key: 'Z',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  },
    {
    key: 'X',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  },
    {
    key: 'C',
    tune: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  }
]

let newMessage = '';

const App = () => {
  return (
    <div id="drum-machine">
    <div id='display'>
    {sounds.map((sound, id) => (
        <Box text={sound.key} key={id} audio={sound.tune}/>
      ))}
    </div>
      <div id="message"><h1>You played the {newMessage} note</h1></div>
  </div>
   )
} 

class Box extends React.Component {
  constructor(props) {
    super(props)
    this.audio = React.createRef()
    
    window.document.addEventListener('keydown', e => {
      if (e.key.toUpperCase() === props.text) {
        this.audio.current.play()
        newMessage = e.key.toString() // I'm setting the newMessage to the key
        }
        })
  }
  
  playTune = () => {
    this.audio.current.play()
  }
  
  render() {
    const {text, audio} = this.props
    return (
      <div className='box' onClick={this.playTune} onClick ={() => newMessage=text}> 
        {text}
        <audio ref={this.audio} src={audio} className="clip" id={text} />
        </div>
        
        )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))  

  1. I declare a let called newMessage
  2. On the last div, I have it so that it will show me what key I pressed.
  3. In my if statement to check if the user clicked a button that was in the sounds array on a keyboard, I want newMessage to change into that key that turns into a string.
  4. On my onClick function, I want newMessage to be the key.

Am I on the right path or should I go down another route? Thank you!

How To Pass State From Child to Parent Component

You don’t!

I haven’t used React in a while so don’t quote me, but I believe the convention is to hold the state in the parent, and create a function in the parent that updates said state. Then you pass that updater function down to the child, so that the child can call it when the event happens.