locked
Where to connect to server in this search code? RRS feed

  • Question

  • User887623398 posted

    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" })));
    
    
    
        }
    }
    
    
    

    Tuesday, January 5, 2021 6:47 PM

All replies

  • User-474980206 posted

    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.

    Tuesday, January 5, 2021 8:43 PM