I'm trying to add submit functionality to my semantic-ui-react Search ponent 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 = `=${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

I'm trying to add submit functionality to my semantic-ui-react Search ponent 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./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

• javascript
• reactjs
• semantic-ui
• semantic-ui-react

1 Answer 1

The change required here is:-

Instead of

<Search
    onChange={this.handleChange}
    type='text'
    value={this.state.value} // THIS CAUSING CONFICT WITH INTERNAL STATE?
    size='big'
    placeholder='What would you like to eat today? ...'/>

Should be

<Search
    onSearchChange={this.handleChange}
    type='text'
    value={this.state.value} // THIS CAUSING CONFICT WITH INTERNAL STATE?
    size='big'
    placeholder='What would you like to eat today? ...'/>

Basically onChange should be replaced with onSearchChange