title: How do I play a sound in React
body: <p>I am trying to play a short mp3 of a bird chirping when the submit button is clicked. I have the mp3 file in my folder with the rest of my components. It is called Chirps.mp3. How would I go about doing this? I want the sound every-time it is clicked. I don't want the user to have the ability to pause the sound if clicked again before it is finished playing.</p>
  
  <p>This answer doesn't really apply to my situation and being new to react the extra features confused me: <a href="https://stackoverflow.com/questions/60381899/how-do-i-play-a-sound-in-react?noredirect=1#comment106814998_60381899">How do I play a sound in React</a></p>
  
  <pre><code>    import React, { Component } from 'react'
  
  
  
  export class AddChirp extends Component {
      state = {
          userName: '',
          chirp: ''
      }
  
  
      onSubmit = (e) =&gt; {
          e.preventDefault();
          this.props.addChirp(this.state.userName, this.state.chirp);
          this.setState({ chirp: '', userName: '' });
      }
  
      onChange = (e) =&gt; this.setState({ [e.target.name]: e.target.value });
  
      render() {
          return (
              &lt;form onSubmit={this.onSubmit} &gt;
                  &lt;input
                      className="col-2 p-3 mb-3 mt-3 bg-danger text-dark"
                      type="text"
                      name="userName"
                      placeholder="Username"
                      value={this.state.userName}
                      onChange={this.onChange}
                  &gt;&lt;/input&gt;
  
                  &lt;input
                      className="col-9 p-3 mb-3 mt-3 bg-danger text-dark"
                      type="text"
                      name="chirp"
                      placeholder="Chirp"
                      value={this.state.chirp}
                      onChange={this.onChange}
                  &gt;&lt;/input&gt;
  
                  &lt;button className=" col-1 btn btn-danger p-3 mb-4 mt-3"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          )
      }
  }
  
  export default AddChirp
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lbAP8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lbAP8.jpg" alt="enter image description here"></a></p>