score:0

Accepted answer

add method to your class or pass state to receiptsdata function;

export const recipesdata = (search) =>{
    const url = `https://www.food2fork.com/api/search?key=${key}&q=${search}&page=2`;

    const recipesdata = fetch(url).then(res => res.json());
    return recipesdata;

or

class search extends component {
  state = {
    search: ""
  };

  handlechange = e => {
    this.setstate({
      [e.target.name]: e.target.value
    });
  };

   handlesubmit = (e) => {
    e.preventdefault();
    const url = `https://www.food2fork.com/api/search?key=${key}&q=${this.state.search}&page=2`;
    fetch(url)
      .then(res => res.json())
      .then(res => {
        console.log(res);
})
  }

  render() {

    return (
      <div>
        <form onsubmit={this.handlesubmit}>
          <input
            type="text"
            name="search"
            value={this.state.search}
            onchange={this.handlechange}
          />
          <button type="submit">
            search
          </button>
        </form>
      </div>
    );
  }
}
export default search;

score:0

here is a working example using react hook:

const search = () => {
  const [value, setvalue] = react.usestate('');

  const fetchrecipesdata = url => {
    return fetch(url).then(res => res.json());
  };
  
  const handlechange = e => {
    setvalue(e.target.value);
  };
  
  const handlesubmit = e => {
    const key = 'your_api_key';
    const url = `https://www.food2fork.com/api/search?key=${key}&q=${value}&page=2`;
    
    console.log(fetchrecipesdata(url));
    e.preventdefault();
  };
  
  return (
    <div>
      <form onsubmit={handlesubmit}>
        <input
          type='text'
          value={value}
          onchange={handlechange}
        />
        <button type='submit'>search</button>
      </form>
    </div>
  );
};

reactdom.render(<search />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag