title: how to add a search component in react?
body: <p>I am transforming my current app into React, current ap is using jquery and PHP.</p>
  
  <h1>current search bar</h1>
  
  <pre><code>&lt;ul class="token-input"&gt;
      &lt;li class="token-"&gt;
          &lt;input name="p"  type="password" autocomplete="new-password" value="" data-open="false" class="form-control" placeholder="password protected."&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h1>react header</h1>
  
  <pre><code>import React from 'react';
  import { FormattedMessage } from 'react-intl';
  
  import styled from 'styled-components';
  import A from './A';
  import Img from './Img';
  import NavBar from './NavBar';
  import HeaderLink from './HeaderLink';
  import messages from './messages';
  import SearchBar from '../SearchBar';
  import UserNavbar from '../UserNavbar';
  import logoImage from './logo.png';
  import backgroundImage from './bg.png';
  import './Header.css';
  
  const HeaderImage = styled.div`
    background-image: url(${backgroundImage});
  `;
  
  /* eslint-disable react/prefer-stateless-function */
  class Header extends React.Component {
    render() {
      return (
        &lt;header&gt;
          &lt;HeaderImage className="navbar navbar-primary bg-dark shadow-sm"&gt;
            &lt;div className="container d-flex justify-content-between"&gt;
              &lt;A
                to="/"
                className="navbar-brand d-flex align-items-center"
              &gt;
                &lt;Img src={logoImage} /&gt;
                &lt;span className="slogan d-none d-md-block"&gt; &lt;/span&gt;
              &lt;/A&gt;
              &lt;SearchBar className="search-bar" /&gt;
              &lt;UserNavbar /&gt;
            &lt;/div&gt;
          &lt;/HeaderImage&gt;
  
          &lt;div className="tab-area"&gt;
            &lt;A href="" /&gt;
            &lt;NavBar&gt;
              &lt;HeaderLink to="/"&gt;
                &lt;FormattedMessage {...messages.recent} /&gt;
              &lt;/HeaderLink&gt;
            &lt;/NavBar&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      );
    }
  }
  
  export default Header;
  </code></pre>
  
  <p>can anyone please tell me how can I integrate this search field as 1 component inside the header? (and search is getting data from filter contents which are in the body of the website)</p>