Where to connect to server in this search code? RSS

• • Reply
  SaeedP

  Member

  18 Points

  226 Posts

  Where to connect to server in this search code?

  Jan 05, 2021 06:47 PM|SaeedP|LINK

  Hello,

  I want to make a search bar at the top of the page that returns the tile images. Where should I connect to my database and handle the back end?

  import React, { Component } from 'react';
  
  export class Search extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              loading: false,
              image: ''
          };
  
  
          this.search = this.search.bind(this);
      }
  
      // Get initial image
      componentDidMount() {
          this.getImage();
      }
  
      // Get search value from input box on submit
      search(e) {
          e.preventDefault();
          this.getImage(this.refs.search.value);
      }
  
      // Set image state to the search value
      getImage(search = 'nature') {
          this.setState({
              image: `https://source.unsplash.com/featured/?${search}`
          });
  
      }
  
      render() {
          const divStyle = {
              backgroundImage: `url(${this.state.image})`
          };
  
  
          // Set `search__results` bg image to the image url
          return /*#__PURE__*/(
              React.createElement("div", { className: "search" }, /*#__PURE__*/
                  React.createElement("form", { onSubmit: this.search }, /*#__PURE__*/
                      React.createElement("input", { className: "search__input", type: "text", placeholder: "search...", ref: "search" })), /*#__PURE__*/
  
                  React.createElement("div", { style: divStyle, className: "search__results" })));
  
  
  
      }
  }
  
  
  

• • Reply
  bruce (sqlwo...

  All-Star

  57874 Points

  15505 Posts

  Re: Where to connect to server in this search code?

  Jan 05, 2021 08:43 PM|bruce (sqlwork.com)|LINK

  the search method should use fetch to call the backend to get the list of images. unless the component is going to host the image list, not sure way the image url is in local state.

  also as you are using import and export (requiring a transpile) , not sure why you are not using jsx syntax.

  bruce (sqlwork.com)