title: React- how to pass a state from one component to another
body: <p>I am trying to pass the value of &quot;value&quot; from AdminNavBar.js to Sentiment.js and replace the value in <strong>ticker</strong> variable. I am really new to React. it will be fine for any better approach as well.</p>
  <p>What I actually need is, Search for a ticket and that state will be passed on to Sentiment.js and it will replace the ticker.</p>
  <p>Thanks a lot in advance</p>
  <p><strong>AdminNavBar.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  class AdminNavbar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
      
    }
  
    handleSubmit(event) {
      console.log('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
    render() {
      return (
        &lt;&gt;
          &lt;Navbar className=&quot;navbar-top navbar-dark&quot; expand=&quot;md&quot; id=&quot;navbar-main&quot;&gt;
            &lt;Container fluid&gt;
              &lt;Link
                className=&quot;h4 mb-0 text-white text-uppercase d-none d-lg-inline-block&quot;
                to=&quot;/&quot;
              &gt;
                {this.props.brandText}
              &lt;/Link&gt;
              &lt;Form className=&quot;navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto&quot; onSubmit={this.handleSubmit}&gt;
                &lt;FormGroup className=&quot;mb-0&quot;&gt;
                  &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                    &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                      &lt;InputGroupText&gt;
                        &lt;i className=&quot;fas fa-search&quot; /&gt;
                      &lt;/InputGroupText&gt;
                    &lt;/InputGroupAddon&gt;
                    &lt;Input placeholder=&quot;Search&quot; type=&quot;text&quot; value={this.state.value} onChange={this.handleChange}/&gt;
                  &lt;/InputGroup&gt;
                &lt;/FormGroup&gt;
              &lt;/Form&gt;
              &lt;Nav className=&quot;align-items-center d-none d-md-flex&quot; navbar&gt;
                &lt;UncontrolledDropdown nav&gt;
                  &lt;DropdownToggle className=&quot;pr-0&quot; nav&gt;
                    &lt;Media className=&quot;align-items-center&quot;&gt;
                      &lt;span className=&quot;avatar avatar-sm rounded-circle&quot;&gt;
                        &lt;img
                          alt=&quot;...&quot;
                          src={require(&quot;assets/img/theme/team-4-800x800.jpg&quot;)}
                        /&gt;
                      &lt;/span&gt;
                      &lt;Media className=&quot;ml-2 d-none d-lg-block&quot;&gt;
                        &lt;span className=&quot;mb-0 text-sm font-weight-bold&quot;&gt;
                          Jessica Jones
                        &lt;/span&gt;
                      &lt;/Media&gt;
                    &lt;/Media&gt;
                  &lt;/DropdownToggle&gt;
                  &lt;DropdownMenu className=&quot;dropdown-menu-arrow&quot; right&gt;
                    &lt;DropdownItem className=&quot;noti-title&quot; header tag=&quot;div&quot;&gt;
                      &lt;h6 className=&quot;text-overflow m-0&quot;&gt;Welcome!&lt;/h6&gt;
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem to=&quot;/admin/user-profile&quot; tag={Link}&gt;
                      &lt;i className=&quot;ni ni-single-02&quot; /&gt;
                      &lt;span&gt;My profile&lt;/span&gt;
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem to=&quot;/admin/user-profile&quot; tag={Link}&gt;
                      &lt;i className=&quot;ni ni-settings-gear-65&quot; /&gt;
                      &lt;span&gt;Settings&lt;/span&gt;
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem to=&quot;/admin/user-profile&quot; tag={Link}&gt;
                      &lt;i className=&quot;ni ni-calendar-grid-58&quot; /&gt;
                      &lt;span&gt;Activity&lt;/span&gt;
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem to=&quot;/admin/user-profile&quot; tag={Link}&gt;
                      &lt;i className=&quot;ni ni-support-16&quot; /&gt;
                      &lt;span&gt;Support&lt;/span&gt;
                    &lt;/DropdownItem&gt;
                    &lt;DropdownItem divider /&gt;
                    &lt;DropdownItem href=&quot;#pablo&quot; onClick={e =&gt; e.preventDefault()}&gt;
                      &lt;i className=&quot;ni ni-user-run&quot; /&gt;
                      &lt;span&gt;Logout&lt;/span&gt;
                    &lt;/DropdownItem&gt;
                  &lt;/DropdownMenu&gt;
                &lt;/UncontrolledDropdown&gt;
              &lt;/Nav&gt;
            &lt;/Container&gt;
          &lt;/Navbar&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default AdminNavbar;
  </code></pre>
  <p><strong>Sentiment.js</strong></p>
  <pre><code>import React, {useState,useEffect} from 'react';
  import axios from 'axios';
  import AdminNavbar from './Navbars/AdminNavbar';
  
  export default function Sentiment(props) {
      console.log(&quot;*****************************************&quot;)
      console.log(AdminNavbar.props)
      const [result,setResult] = useState(null);
      const message = async() =&gt;{
          try{
              let res = await axios.get('/sentiment-analysis/AAPL');
              let result = res.data;
              setResult(result);
          }catch(e){
              console.log(e)
          }
      } 
  
      useEffect(() =&gt; {
          message()
      },[])
      return (
          &lt;div&gt;
             {result} 
          &lt;/div&gt;
      )
  }
  </code></pre>