title: Passing state between components
body: <p>I wrote a component with a state <code>chosenGenre</code> and inside it, there is a function that changes the state according to the clicked button.</p>
  
  <p>I would like to take the updated state (which is <code>string</code>) and use it in another component.</p>
  
  <p>This is the component in which the state is declared:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Genre from './Genre';
  import './GenreSelectPage.css';
  import Blues from '../Blues.png';
  import Classical from '../Classical.png'; 
  import Country from '../Country.png';
  
  export default class GenreSelectPage extends Component{
  
      state = {
          chosenGenre: ""
      }
  
      handleClick = (genreName) =&gt; {
          this.setState({ chosenGenre: genreName });
      }
  
      render() {
          return(
          &lt;div className = "GenreSelectPage"&gt;
          &lt;h3&gt;Select your desired Kollab Room Genre&lt;/h3&gt;
          &lt;Genre genrePicture= {Blues} genreClicked = {()=&gt;this.handleClick("Blues")}/&gt;
          &lt;Genre genrePicture= {Classical} genreClicked = {()=&gt;this.handleClick("Classical")}/&gt;
          &lt;Genre genrePicture= {Country} genreClicked = {()=&gt;this.handleClick("Country")}/&gt;
          &lt;/div&gt;
          ) 
       }
  }
  </code></pre>
  
  <p>And this is the new component for which I want to use the <code>chosenGenre</code> state from <code>GenreSelectPage</code> component :</p>
  
  <pre><code>import React, { Component } from 'react';
  import GenreSelectPage from './GenreSelectPage';
  
  export default class InRoomPage extends Component {
  
      render() {
          return(
              &lt;div className = "InRoomPage"&gt;
                  &lt;p&gt;Welcome to {GenreSelectPage.state.chosenGenre} page&lt;/p&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>What should I change inside the:</p>
  
  <pre><code>&lt;p&gt;Welcome to {GenreSelectPage.state.chosenGenre} room !&lt;/p&gt;
  </code></pre>
  
  <p>So it will work?</p>