Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement search bar button and result components in react

I have already seen other answers which are alike, but since I am a beginner, I tried implementing them and I got so confused that nothing worked for me. Here is the problem:

I have a search bar (Searchbar component) which is supposed to have a submit button. When the button is clicked, the search results are supposed to appear in Viewer component. I don't know how to connect event from Searchbar in Viewer. How to tell one component that something changed in the other one? I want two siblings to communicate that

import React from 'react';

var Searchbar = React.createClass({
  getInitialState: function () {
    return {};
  },

handleSubmit: function (e) {
e.preventDefault();
// what to do here
},
render: function () {
return (
  <form onSubmit={this.handleSubmit}>
    <h3>I'm looking for:</h3>
    <input ref="srch" type="search" id="search" placeholder="Search..." />
    <button>Go</button>
    <hr />
  </
});

export default Searchbar;

now for the result component:

var Result = React.createClass({

render() {
    return (
        <div>
            <hr />
            <h2>Result here</h2>
            <h2>{this.props.result.drug_name}</h2>        
            <span>{this.props.result.description}</span>
            <img src={this.props.result.image} />
        </div>
    )
}
export default Result;

They are both contained in the src folder and rendered in App.js as

    var App = React.createClass({
render: function () {
    return (
      <div>
        <Searchbar />
        <Viewer />
      </div>
    )
  } 
});
like image 795
HomeMade Avatar asked Mar 06 '17 19:03

HomeMade


People also ask

How do I display search results in react?

Firstly, we import useState from react . Then, we import the Scroll and SearchList components. Next, in the Search function, we use the useState hook to initialise the value of the searchField state with useState("") (an empty string). After this, we use the filter function on the details list received from the parent.

How do I add a search bar to navbar react?

Creating the Search Bar In your app. js, import the text field component from Material UI. We will use the outlined variant of the text field. import { React, useState } from "react"; import TextField from "@mui/material/TextField"; import List from "./Components/List" import "./App.

How do you implement search in react?

Navigate to your parent folder, create a subfolder called pages , and then create the search input file using this command below. Paste the following code into SearchResults. jsx . Above, we created two React hooks which are the useState and the useEffect .


1 Answers

The basic idea here would be like this. You have your Parent component which renders your search and your viewer. In this component you will have state that will keep track of the user's input as they search, and an array or object that will hold the results of the search. Here is some pseudo code to give you an idea.

 class App extends React.Component {
    constructor() {
        super();
        this.state = {
            searchText: '',
            searchResults: []
        }
    }

    onChange(e) {
        this.setState({searchText: e.target.value});
    }

    getResults() {
        calltodb(searchText).then(e => {
            this.setState({searchResults: e.value})
        });
    }

    render() {
        return (
            <div>
                <SearchBar />
                <SearchResults />
            </div>
        )
    }
}

This is just some example code to give you an idea. Basically, the app component will handle all state and functionality, while the others will deal with visuals only.

like image 186
Chaim Friedman Avatar answered Sep 18 '22 20:09

Chaim Friedman