CODEWITHSUNDEEP
javascriptreactjs
xploreraj
xploreraj

Reputation: 4362

How to render results of search in another component in React?

I am a beginner in React and using Webpack to build into a bundle.js and display.

My need is to provide some search forms and accordingly display result below search form. So, for modularizing it, I have create a parent component containing both search and result view components.

Now that I have designed a form and written form onSubmit event handler, how should i proceed to render API results (dummy json for now) in the result component. I am attaching a brief pic of my intention for your reference.

enter image description here

Upvotes: 10

Views: 12309

Answers (3)

klugjo
klugjo

Reputation: 20885

Here is my solution based on my comments above: https://codesandbox.io/s/q85oq0w10q

Create an HOC that will hold the state of your app, then your two children are merely used for rendering purpose and can be made pure functions

import React from 'react';
import { render } from 'react-dom';

const Result = ({results}) => {
  return results.map((r, i) => <div key={i}>{r}</div>);
}

const Search = (props) => {
  const {
    searchQuery,
    onChange,
    search
  } = props;

  return <div>
    <input
      type="text"
      value={searchQuery}
      onChange={onChange}
    />
    <button onClick={search}>Search</button>
  </div>;
}

class Container extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchQuery: '',
      results: []
    }

    this.onSearchQueryChange = this.onSearchQueryChange.bind(this);
    this.onSearch = this.onSearch.bind(this);
  }

  onSearchQueryChange(e) {
    this.setState({searchQuery: e.target.value});
  }

  onSearch() {
    // Simulate AJAX call
    setTimeout(() => {
      this.setState({results: [0, 1, 2, 3, 4]});
    }, 1000)
  }

  render() {
    const {results, searchQuery} = this.state;

    return <div>
      <Search
        searchQuery={searchQuery}
        onChange={this.onSearchQueryChange}
        search={this.onSearch}
      />
      <Result results={results} />
    </div>;
  }
}

Upvotes: 5

Talgat Saribayev
Talgat Saribayev

Reputation: 1938

In my opinion if you are new in React. You should learn first using React. Because I see that a lot of people use Redux(or any other app state handler) as a storage for any data.

Your case is actually very good example to learn two of the basic ideas: if children need similar thing, parents should handle it and params go down and callbacks go up.

So all your logic has to be in Container Component, make callback of http request function, with update of state(setState) after resolving response and send to Search Component. onSubmit call that callback, and send data to Result Component.

So you no need of additional library(maybe for http request). 1 Class component(Container Component). 2 Probably stateless functional components(Search Component & Result Component).

Upvotes: 1

The Reason
The Reason

Reputation: 7983

I believe this is what you are looking for. Worked example fiddle

So the idea is to keep your result in Container component and pass it down to Result component. Also Container component should pass a callback function to your Search component and it will be triggered with a API result from the Search component.

Also you may want to take a look at Redux. This is a library for managing your app state. With Redux it can be achieved in more easiest way.

Hope it will help you.

Upvotes: 2

Related Questions