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