-
-
Save danielrudn/a9b9bbafa491ae58b54aec9c328ea37b to your computer and use it in GitHub Desktop.
second replacement - https://cognitiveclass.ai/blog/react-on-rails-tutorial-integrating-react-and-ruby-on-rails
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import axios from 'axios'; | |
export default class Search extends React.Component { | |
state = { loading: false, results: [] }; | |
onChange = (e) => { | |
const { value } = e.target; | |
this.setState({ loading: true }); | |
if (value.length > 0) { | |
axios.get('/search.json', { params: { query: value } }) | |
.then(res => this.setState({ loading: false, results: res.data })) | |
.catch(() => this.setState({ loading: false, results: [] })); | |
} else { | |
this.setState({ loading: false, results: [] }); | |
} | |
} | |
render() { | |
return ( | |
<div className="ui raised segment no padding"> | |
<form method="GET" action="search"> | |
<div className="ui fluid icon transparent large input"> | |
<input name="query" type="text" placeholder="Search apps..." onChange={this.onChange} autoComplete="off" /> | |
<button type="submit"> | |
<i className="search icon"></i> | |
</button> | |
</div> | |
</form> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment