39a7c6e5-70f4-487f-a9fb-11b47f7f5157
prompter
Write a React app that can take user input, call an api and display the result in HTML.
3f2b9789-e759-476e-bff8-1d88798b49da
39a7c6e5-70f4-487f-a9fb-11b47f7f5157
assistant
Here's an example of a React app that takes user input, calls an API, and displays the result in HTML:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [inputValue, setInputValue] = useState('');
  const [result, setResult] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = async () => {
    try {
      const response = await axios.get(`https://example-api.com/${inputValue}`);
      setResult(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Submit</button>
      <div>{result}</div>
    </div>
  );
}

export default App;


This app uses React's useState hook to manage the user input and the API response. When the user types into the input field, the handleInputChange function updates the inputValue state. When the user clicks the button, the handleButtonClick function makes an API request using the axios library and updates the result state with the response data. Finally, the app displays the inputValue, a submit button, and the result in separate div elements.