title: Set state of href or passing as props to new component in React
body: <p>A bit new to React, so sorry if I don't explain this too well. I'm making a react project that allows users to search for artist tracks from the Spotify API. The search result renders a bunch of cards with artist information, and with a click on an  tag (href is a url to a song preview) I would like to render an audio visualizer component that works with the audio analyzer node and audio tags. </p>
  
  <p>Anyways, I have two main problems:</p>
  
  <p>1) I need to pass the clicked href song preview url to the audio analyzer component as the audio source (something like audio.src = preview_url). I need to figure out how to a) either set the state with the current clicked href and/or b) pass the preview url as props to the audio visualizer component.</p>
  
  <p>2) I need the ArtistCard component to disappear upon clicking the  tag so that only the audio visualizer component is rendered (this will hopefully be easier than question 1). </p>
  
  <p>Here is my code, and sorry again if this doesn't make too much sense. I can try to clarify if need be. </p>
  
  <pre><code>export default class ArtistCard extends Component {
  constructor(props){
      super(props)
  
      this.state = {
          renderAudioAnalyzer: false,
          visibility: ''
      }
  }
  
  togglePreviewUrlState(){
      this.setState({ renderAudioAnalyzer: true })
      if(this.state.renderAudioAnalyzer){
          this.refs.artistCard.style.display = 'hidden'
          //this currently doesn't work yet...
          // style={{display: 'none'}} &lt;--- do something like this?
      }
  }
  
  
  
  render() {
      let {tracks} = this.props
      if(!this.state.renderAudioAnalyzer){
          return (
              &lt;div className="card col s3" id="artistCard"&gt;
                  &lt;div className="card-inner"&gt;
                      &lt;div className="card-image"&gt;
                          &lt;img alt="/logo.svg" className="Image" src={tracks.album.images[1].url}/&gt;
                          &lt;span className="card-title"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="card-content"&gt;
                          &lt;p id="artistCardTrackName"&gt;{tracks.album.name}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className="card-action"&gt;
                          &lt;a
                              onClick={this.togglePreviewUrlState.bind(this)}
                              href={tracks.preview_url} //need to set this as state or pass as props?
                          &gt;{tracks.name}&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }else{
          return(
              &lt;div&gt;&lt;AudioAnalyzer/&gt;&lt;/div&gt;
          )
      }
  }
  }
  </code></pre>
  
  <p>and here is the audio visualizer component (obviously missing quite a few things here still but I want to get the href passed over properly before anything else):</p>
  
  <pre><code>export default class AudioAnalyzer extends Component {
    constructor(props){
      super(props)
    }
  
    render(){
      return (
        &lt;div id="mp3_player"&gt;
          &lt;div id="audio_box"&gt;
            &lt;audio
              refs="audio"
              autoPlay="true"
              controls="true"
              src={this.props.tracks.preview_url} &lt;--href needs to be passed to here some how?
            &gt;
            &lt;/audio&gt;
          &lt;/div&gt;
          &lt;canvas
            refs="analyser"
            id="analyser"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>