title: How to pass prop of one component to another component as a style
body: <p>I have a code to allow user to input a color. I want to set that as the background color for multiple pages. When the user selects that color it only styles the container for the color selection and nothing else. I am trying to figure out how to style multiple pages with this code so I don't think I can just put them together. I have attempted passing the prop at different locations on the page to update but nothing. It's like they can't see each other at all.</p>
  <p>Here is the page I want to update:</p>
  <p>KidPortal.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from &quot;react-dom&quot;;
  import 'antd/dist/antd.css';
  import { Avatar } from 'antd';
  import './kidportal.css';
  import AvatarSelector from './AvatarSelector';
  import GirlAvatar from &quot;../avatars/girl_avatar.png&quot;;
  import BoyAvatar from &quot;../avatars/boy_avatar.png&quot;;
  import DuckAvatar from &quot;../avatars/duck_avatar.png&quot;;
  import GameIcon from &quot;../icons/game_icon.png&quot;;
  import QuizIcon from &quot;../icons/quiz_icon.png&quot;;
  import MusicIcon from &quot;../icons/music_icon.png&quot;;
  import StoryIcon from &quot;../icons/storytelling_icon.png&quot;;
  import BackgroundColor from './BackgroundColor';
  import { color } from './BackgroundColor';
  
  
  const Portal = (color) =&gt; {
  
      return (
          &lt;div className=&quot;kid-page-main&quot;&gt;
              &lt;div className='kid-header'&gt;
                  &lt;h3 className='kid-welcome'&gt;Hello&lt;/h3&gt;
                  &lt;BackgroundColor /&gt;
                  { &lt;img src={DuckAvatar} className=&quot;kid-avatar&quot; /&gt;  }
              &lt;/div&gt;
              &lt;div className='kid-page-body'&gt;
                  &lt;a className='games-button'&gt;&lt;img src={ GameIcon} alt=&quot;game button&quot; /&gt;&lt;/a&gt;
                  &lt;a className='quizzes-button'&gt;&lt;img src={ QuizIcon } alt=&quot;quiz button&quot; /&gt;&lt;/a&gt;
                  &lt;a className='music-button'&gt;&lt;img src={ MusicIcon} alt=&quot;music button&quot; /&gt;&lt;/a&gt;
                  &lt;a className='storytelling-button'&gt;&lt;img src={ StoryIcon} alt=&quot;story button&quot; /&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  </code></pre>
  <p>Here is the code I am using to update:</p>
  <p>BackgroundColor.js</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import Portal from './KidPortal'
  
  
  import &quot;./kidportal.css&quot;;
  
  class Color extends React.Component{
      //initial state setup
      constructor(props) {
          super(props);
          this.state = {
            color: &quot;white&quot;
          };
        }
        changeColor(e) {
          this.setState({
            color: e.target.value
          });
        }
      
        render() {
          const stylesPage = {
            background: this.state.color
          };
      
          return (
          
            &lt;div style={stylesPage} className=&quot;container&quot; &gt;
              &lt;div className=&quot;color-box&quot;&gt;
                &lt;p&gt;What is your favorite color?&lt;/p&gt;
                &lt;input
                  value={this.state.color}
                  onChange={this.changeColor.bind(this)}
                /&gt;
               
              &lt;/div&gt;
            &lt;/div&gt;
            
          );
        }
      }
      export default Color;
  
      document.getElementsByClassName(&quot;main-page&quot;);    
  </code></pre>