When I use style="display:none" on an audio element inside my code it removes the whole page instead of just making the audio element invisible. I tried with style="visibility:hidden" but it still does the exact same thing. No compilation errors occur. Can anyone explain to me why this happens and how to fix this? Here is my code down below:

 return (
      <div className="App">
        <div id="drum-machine" style={drummachinestyle}>
        <div id="display" style={displaystyle}></div>
        <div id="buttons" style={buttonsstyle}>
          <button id="kick1"  style={drumpadstyle} onClick={this.handleQ}>
            Q
          </button>
          <button id="kick2"  style={drumpadstyle} onClick={this.handleW}>
            W
          </button>
          <button id="openhi"  style={drumpadstyle} onClick={this.handleE}>
            E
          </button>
          <button id="closedhi"  style={drumpadstyle} onClick={this.handleA}>
            A
          </button>
          <button id="snare"  style={drumpadstyle} onClick={this.handleS}>
            S
          </button>
          <button id="shaker"  style={drumpadstyle} onClick={this.handleD}>
            D
          </button>
          <button id="rim"  style={drumpadstyle} onClick={this.handleZ}>
            Z
          </button>
          <button id="cowbell"  style={drumpadstyle} onClick={this.handleX}>
            X
          </button>
          <button id="conga"  style={drumpadstyle} onClick={this.handleC}>
            C
          </button>
          <audio controls={true} className="clip" id="Q" style="display:none">
            <source src={kick1} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="W" >
            <source src={kick2} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="E" >
            <source src={openhi} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="A" >
            <source src={closedhi} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="S" >
            <source src={snare} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="D" >
            <source src={shaker} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="Z" >
            <source src={rim} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="X" >
            <source src={cowbell} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
          <audio controls={true} className="clip" id="C" >
            <source src={conga} type="audio/mp3" / >
            Your browser does not support the audio tag.
          </audio>
        </div>
        </div>
      </div>
    )

CodePudding user response：

You're just using the style attribute wrong in the first audio tag!

Change

<audio controls={true} className="clip" id="Q" style="display:none">

To

<audio controls={true} className="clip" id="Q" style={{display:"none"}}>

CodePudding user response：

As per the react docs here,

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes

In your case you need to pass the style as style={{display:'none'}}

CodePudding user response：

As in the above answered, it is explained already that you are using style as a string but in react it should be the object like below

style={{display:"none"}}

Please read this doc for more information