Where to connect to server in this search code?

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



    }
}

Answer 1

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.