400 Плохой запрос - вызов API - использование React {this.state.input

Question

Я создаю приложение, в которое пользователь загружает картинку с едой, и API ответит ингредиентами. на моем OnButtonSubmit, если я напишу URL для проверки, это работает. Но если я использую {this.state.input}, он отправляет мне 400 неверных запросов.

Может быть связано с моим FoodRecognition.JS (отдельный файл). Если пишешь

Может ли кто-нибудь помочь мне, пожалуйста? Код ниже.

Заранее спасибо

import React, { Component } from 'react'
import Clarifai from 'clarifai'
import Navigation from './components/Navigation/Navigation'
import FoodRecognition from './components/Food_recognition/Food_recognition'
import Logo from './components/Logo/Logo'
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm'
import Signin from './components/Signin/Signin'
import Register from './components/Register/Register'
import './App.css'

const app = new Clarifai.App({
  apiKey: '6382df74e5c243f589fff9057a7e41bd'
 });


class App extends Component {
  constructor()  {
    super()
    this.state = {
      input: '',
      imageUrl: '',
      route: 'signin',
      isSignedIn: false
    }
  }

  onInputChange = (event) => {
    this.setState({imput: event.target.value})

  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input})
    app.models
    .predict( 
      Clarifai.FOOD_MODEL,
      this.state.input)
      .then(
    function(response) {
      console.log(response)
    },
    function(err) {
    }
  );
  }

onRouteChange = (route) => {
  if (route === 'signout') {
    this.setState({isSignedIn: false})
  } else if (route === 'home') {
    this.setState({isSignedIn: true})
  }
this.setState({route: route})
}

  render() { 
    const { isSignedIn, imageUrl, route } = this.state
    return (
      <div className="App">
        <Navigation isSignedIn={this.state.isSignedIn}onRouteChange={this.onRouteChange} />
        {route === 'home'
          ? <div>
            <Logo />
            <ImageLinkForm
              onInputChange={this.onInputChange}
              onButtonSubmit={this.onButtonSubmit} />
            <FoodRecognition imageUrl={imageUrl} />
          </div>
          : (
            route === 'signin'
              ? <Signin onRouteChange={this.onRouteChange} />
              : <Register onRouteChange={this.onRouteChange} />
          )
        }
      </div>
    );
  }
}

export default App;

FoodRecognition.js

import React from 'react'

const FoodRecognition = ({ imageUrl }) => {
    return (
    <div className='center ma'>
    <div className='absolute mt2'>
        <img alt='' src={imageUrl} width='500px' height='auto'/>
    </div>
    </div>
    )
}

export default FoodRecognition