0

I am transforming my current app into React, current ap is using jquery and PHP.

current search bar

<ul class="token-input">
    <li class="token-">
        <input name="p"  type="password" autocomplete="new-password" value="" data-open="false" class="form-control" placeholder="password protected.">
    </li>
</ul>

react header

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 (
      <header>
        <HeaderImage className="navbar navbar-primary bg-dark shadow-sm">
          <div className="container d-flex justify-content-between">
            <A
              to="/"
              className="navbar-brand d-flex align-items-center"
            >
              <Img src={logoImage} />
              <span className="slogan d-none d-md-block"> </span>
            </A>
            <SearchBar className="search-bar" />
            <UserNavbar />
          </div>
        </HeaderImage>

        <div className="tab-area">
          <A href="" />
          <NavBar>
            <HeaderLink to="/">
              <FormattedMessage {...messages.recent} />
            </HeaderLink>
          </NavBar>
        </div>
      </header>
    );
  }
}

export default Header;

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)

Thomas Gak-Deluen
  • 2,759
  • 2
  • 28
  • 38
fhei izze
  • 81
  • 2
  • 11

1 Answers1

0

In SearchBar.js:

class SearchBar extends React.Component {
  state = {
    value: '',
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  handleSubmit = () => {
    const { value } = this.state;

    // do ajax request or something in order
    // to submit and redirect to a different page
    // containing search results
  }

  render() {
    return (
      <ul class="token-input">
        <li class="token-">
          <input
            name="p"
            type="password"
            autocomplete="new-password"
            value={this.state.value}
            data-open="false"
            className="form-control"
            placeholder="password protected."
          />
        </li>
      </ul>
    );
  }
}

Then you would simply need to import the same way you did.

Thomas Gak-Deluen
  • 2,759
  • 2
  • 28
  • 38
  • if I need to get filtered data from an api do I need to use redux here ? – fhei izze Aug 07 '18 at 13:26
  • You don't need redux. It really depends of how your whole app is. You might want to start doing things without redux first. Do your ajax request and refresh the state of the parent or something similar – Thomas Gak-Deluen Aug 07 '18 at 13:33
  • if you can please check this question also https://stackoverflow.com/questions/51738436/a-toggle-between-2-elements-in-pure-javascript – fhei izze Aug 08 '18 at 04:02