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.

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