score:3

Accepted answer
import React, { useEffect, useState } from "react";
import axios from 'axios';

const ManipulateData = (props) => {
  const [apiResult, setApiResult] = useState();;

  useEffect(() => {
    handleApiRequest(props.saveState);
  }, [props.saveState])

  const handleApiRequest = async (value) => {
    try {
      //Make API Call and get result back
      // Set result to state using the setApiResult function
      const response = await axios.get(value);

      if (response) {
        setApiResult(response)
      }
      else {
        throw (error)
      }
    }
    catch (error) {
      //Handle error
    }
  }

  return (
    <div>
      <p>{apiResult}</p>
    </div>
  );
}

export default ManipulateData;

score:0

    return (
        <div>
            <div className="pantryInput">
                <form onSubmit={handleSubmit} className="pantryForm">
                    <label>Enter the ingredients you have for dinner</label>
                    <input value={input} onChange={handleChange} type='text' placeholder="What's in your pantry?" />
                </form>
            </div>
            {saveState && <ManipulateData saveState={saveState} />} 
        </div>
    )

Related Query

More Query from same tag