Hello I am having problem to fetch my id but I am not using any API.
This is terminal error: React Hook useEffect has a missing dependency: 'foods'. Either include it or remove the dependency array. You can also do a functional update 'setFoods(f => ...)' if you only need 'foods' in the 'setFoods' call react-hooks/exhaustive-deps
Line 3:10: 'foods' is defined but never used
I am trying to convert react to React hooks and from class components to functional components using useState and useEffect.
This is my app code when I was converting from class components to functional components and using React Hooks I failed to fetch my foods id.
import React, { useState, useEffect } from "react";
import FoodCardList from '../food_components/FoodCardList';
import { foods } from '../foods';
import SearchFoodBox from '../food_components/SearchFoodBox';
import '../react_containers/App.css';
import Scroll from '../food_components/Scroll';
import ErrorBoundry from '../food_components/ErrorBoundry';
function App () {
// constructor() {
// super()
// this.state = {
// foods: [],
// searchfield: ''
// }
// console.log('constructor 1');
// }
const [foods, setFoods] = useState([])
const [searchfield, setSearchfield] = useState('')
// componentDidMount() {
// setTimeout(() => {
// this.setState({foods: foods})
// }, 1000)
// console.log('check');
// If we use any json api then we can use this method
// fetch('https://jsonplaceholder.typicode.com/users')
// .then(response => response.json())
// .then(users => this.setState({ foods: users }));
// console.log('componentDidMount 2');
// }
useEffect(() => {
setFoods({foods});
// fetch('https://jsonplaceholder.typicode.com/users')
// .then(response => response.json())
// .then(users => setFoods({users}));
}, []);
const onSearchChange = (event) => {
// this.setState({ searchfield: event.target.value })
setSearchfield(event.target.value)
}
// render () {
// const { foods, searchfield } = this.state;
const filteredFoods = foods.filter(foods => {
return foods.restaurant_name.toLowerCase().includes(searchfield.toLowerCase());
})
// if (foods.length === 0) {
return !foods.length ?
<h1> LOADING....</h1> :
(
<div
className="tc"
>
<h1
className="f-subheadline"
>
ARK Food Delivery Services
</h1>
<SearchFoodBox
searchChange={onSearchChange}
/>
<br/>
<Scroll>
<ErrorBoundry>
<FoodCardList
foods={filteredFoods}
/>
</ErrorBoundry>
</Scroll>
</div>
);
}
// console.log('render 3');
// console.log(event.target.value);
// console.log(filteredFoods);
// }
export default App;
Moreover this is my food.js file :
export const foods = [
{
id: 1,
userId: 'Featured',
restaurant_name: 'KFC - Old Kent Road',
username: 'KFC',
address: '671-679 Old Kent Road, London, SE151JS',
rating: '4.8 Star',
image: 'https://cdn.pixabay.com/photo/2014/10/19/20/59/hamburger-494706__480.jpg'
},
{
id: 2,
userId: 'Up to 10% off',
restaurant_name: 'Burger King - Peckham',
username: 'Burger King',
address: '46-52 HIGH STREET, London, SE155DP',
rating: '5.0 Star',
image: 'https://cdn.pixabay.com/photo/2016/05/25/10/43/hamburger-1414422__340.jpg'
},
{
id: 3,
userId: 'Latest Featured',
restaurant_name: 'Shake Shack – Burgers & Shakes',
username: 'Shake Shack',
address: 'British Wharf Industrial Estate, London, SE145RS',
rating: '3.9 Star',
image: 'https://cdn.pixabay.com/photo/2017/03/10/13/49/fast-food-2132863__340.jpg'
},
{
id: 4,
userId: 'Fastest delivery',
restaurant_name: 'Dishoom',
username: 'Dishoom',
address: '145 Ormside Street, South Bermondsey, London, SE151TF',
rating: '3.5 Star',
image: 'https://cdn.pixabay.com/photo/2016/11/25/16/08/sushi-1858696__340.jpg'
},
{
id: 6,
userId: 'Top rated',
restaurant_name: 'Coqfighter - Brockley',
username: 'Coqfighter',
address: '10 Coulgate Street,, London, SE42RS',
rating: '4.0 Star',
image: 'https://cdn.pixabay.com/photo/2016/01/04/07/07/korean-cabbage-in-chili-sauce-1120406__340.jpg'
},
{
id: 7,
userId: 'New on ARK Deliveroo',
restaurant_name: 'Tortilla - Editions - BSY',
username: 'Tortilla',
address: 'Unit 9, British Wharf, Landmann Way, London, SE145RS',
rating: '4.9 Star',
image: 'https://media.istockphoto.com/photos/beef-in-pita-picture-id1000037434?k=6&m=1000037434&s=612x612&w=0&h=yUnAa_9o2nxFIsf_ZAiAdwhNvsIJolci0rN83046BlY='
},
{
id: 8,
userId: 'Delivery starting from £0',
restaurant_name: 'EatPoke - SE',
username: 'EatPoke',
address: 'Food Star Kitchen, Unit-3, 81 Enid Street, London, SE163RA',
rating: '4.4 Star',
image: 'https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665__340.jpg'
},
{
id: 9,
userId: 'Only on ARK Deliveroo',
restaurant_name: 'Biju Bubble Tea - Borough High Street',
username: 'Biju Bubble Tea',
address: '293-295 Borough High Street, London, SE11JG',
rating: '4.1 Star',
image: 'https://cdn.pixabay.com/photo/2016/03/05/20/07/abstract-1238657__340.jpg'
},
{
id: 10,
userId: 'Meal deals',
restaurant_name: 'Falafel and Shawarma - Camberwell',
username: 'Falafel and Shawarma',
address: '27 Camberwell Church, London, SE58TR',
rating: '5.8 Star',
image: 'https://media.istockphoto.com/photos/healthy-diet-vegetarian-wrap-with-tofu-hummus-and-hot-sauce-part-of-picture-id1074997154?k=6&m=1074997154&s=612x612&w=0&h=_CGoNbl8xUjq5hCtc1GZseW9WV6K481IRnIkF7LxWRU='
},
{
id: 11,
userId: 'Up to 50% off',
restaurant_name: 'Caffe Paradiso - Shad Thames',
username: 'Caffe Paradiso',
address: '45 Shad Thames, London, SE12NJ',
rating: '5.0 Star',
image: 'https://cdn.pixabay.com/photo/2017/02/25/15/18/spring-rolls-2097978__340.jpg'
}
];
