CODEWITHSUNDEEP
javascriptreactjs
nathannewyen
nathannewyen

Reputation: 253

Create a search bar in react

I'm trying create a search bar, when user want to search a product.

Here is my Search Input:

const [searchTerm, setSearchTerm] = useState("");

const onSubmit = (e) => {
  e.preventDefault();
  navigate(`/search/${searchTerm}`);
  setIsShowing(false);
  setOpacity(1);
};

<SearchTitle>What are you looking for?</SearchTitle>
<FormSearch onSubmit={onSubmit}>
  <SearchInput type="text" 
               placeholder="Type something to search" 
               onChange={(e)=> setSearchTerm(e.target.value)} 
               defaultValue={searchTerm} />
  <SearchButton type="submit" value="Search" />
</FormSearch>

and here is the router when click search and take user to another page:

<Router>
  <SearchInfo
    path="/search/:title "
    setSearchTerm={setSearchTerm}
  />
</Router>

and here is my react function for the page after search:

import React, { useEffect, useState } from "react";
import styled from "styled-components";
const SearchInfo = (props) => {
  const [response, setResponse] = useState({});
  useEffect(() => {
    console.log(props);
  }, [props]);

  const InfoWrapper = styled.div`
    text-align: center;
  `;

  return (
    <div>
      <InfoWrapper>
        {props === "beuter" ? <h1> Hello World </h1> : <h1>Null</h1>}
      </InfoWrapper>
    </div>
  );
};

export default SearchInfo;

Why I typed beuter into my search bar and went to the page but it return Null instead of Hello World?

This is my console show when I console.log(props):

{path: "/search/:title ", "title ": "beuter", uri: "/search/beuter",
 location: {…}, setSearchTerm: ƒ, …} children: undefined location:
 {pathname: "/search/beuter", search: "", hash: "", href:
 "http://localhost:3000/search/beuter", origin:
 "http://localhost:3000", …} navigate: ƒ navigate(to, options) path:
 "/search/:title " setSearchTerm: ƒ () "title ": "beuter" uri:
 "/search/beuter"
 __proto__: Object

I created Items from mongoose and every item has a title beuter in it.

Upvotes: 0

Views: 137

Answers (1)

Adhil Juvane
Adhil Juvane

Reputation: 685

From your console log props is the entire object what u need is props.title so change your InfoWrapper component to this :

<InfoWrapper>
  {props.title === "beuter" ? <h1> Hello World </h1> : <h1>Null</h1>}
</InfoWrapper>

Upvotes: 1

Related Questions