CODEWITHSUNDEEP
reactjs
Sidharth
Sidharth

Reputation: 15

How to fix 400 bad request error when using React?

I have a button and a text bar. when the button is clicked, it will send the url entered in the text bar to an API and get the response. I think this can be solved with the setState() Callback function. But i am Not able to understand how to implement it.....

 class App extends Component {
constructor() {
super();
this.state = {
input:'',
imageUrl:''
}
}
 onInputChange=(event) => {
 this.setState=({input: event.target.value});
 }
 onButtonSubmit = () => {
 app.models.predict(Clarifai.COLOR_MODEL,this.state.input).then(
    function(response) {
    console.log(response);
   },
    function(err) {
  // there was an error
}
);
}
 render() {

        <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit= 
 {this.onButtonSubmit} />       

    <FaceRecognition imageUrl={this.state.imageUrl} />
  </div>   
);
  }
}
 export default App;

Upvotes: 0

Views: 3394

Answers (1)

Shawn Andrews
Shawn Andrews

Reputation: 1442

Below is a demonstration on how to send an http request by using the url entered in a textbox.

Note you used the syntax for setState incorrectly. setState is a function and should called like so this.setState({ ... });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
  }
  
  onInputChange = event => {
    this.setState({ 
      input: event.target.value
    });
  };
  
  onButtonSubmit = () => {
    fetch(this.state.input)
      .then(() => {
        alert(`Success!`);
      })
      .catch((err) => {
        alert(`Failure: ${err}`);
      });
  };
  
  render() {
    return (
      <div>
          <input type="text" onChange={this.onInputChange}/>
          <button onClick={this.onButtonSubmit}>Submit URL</button>
      </div>
    );
  }
}


ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 1

Related Questions