I'm trying to add submit functionality to my semantic-ui-react Search component but it's not behaving the way i want it to.
The submit should make a ajax call to an api and log out the data.
Does anyone know how to make it work? I'm either getting errors or my ajax request search query ends up empty even if i write something in the input field.
import React, {Component} from 'react'
import { Container, Header, Search } from 'semantic-ui-react'
import './jumbotron.css'
class Jumbotron extends Component {
constructor(props) {
super(props)
this.state = {value: ''}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value})
}
handleSubmit(event) {
const food = this.state.value;
const url = `https://api.edamam.com/search?q=${food}&app_id=${appId}&app_key=${apiKey}`
fetch(url).then( response => response.json())
.then( data => console.log(data))
event.preventDefault();
}
render() {
return (
<Container text>
<Header>
Nutrion
</Header>
<form onSubmit={this.handleSubmit}>
<Search
onChange={this.handleChange}
type='text'
value={this.state.value}
size='big'
placeholder=' ...'/>
<input type="submit" value="Submit" />
</form>
</Container>
)
}
}
export default Jumbotron