Hello I am new in react and I am building a restaurant app so I am facing a problem which comes when I transformed my react class application to react hooks, why is this not working well in React hooks If in React classes It does
const RenderDish = (props) => {
const dish = props.dish;
if (dish != null) {
return (
<Card
featuredTitle={dish.name}
image={require('./images/uthappizza.png')}
>
<Text style={{ margin: 10 }}>
{dish.description}
</Text>
<Icon
raised
reverse
name={ props.favorite ? 'heart' : 'heart-o' }
type='font-awesome'
color='#f50'
onPress={() => props.favorite ? console.log('Already favorite') : props.onPress()}
/>
</Card>
);
}
else {
return(
<View></View>
)
}}
const Dishdetail = (props) => {
const [dishes, setDishes] = useState(DISHES);
const [comments, setComments] = useState(COMMENTS);
const [favorites, setFavorites] = useState([])
const markFavorite = (dishId) => setFavorites({ favorites: favorites.concat(dishId) })
const dishId = props.route.params.dishId;
return (
<ScrollView>
<RenderDish dish={dishes[+dishId]}
favorite={favorites.some(el => el === dishId)}
onPress={() => markFavorite(dishId)}
/>
<RenderComments comments={comments.filter(comment => comment.dishId === dishId)} />
</ScrollView>
);}
This is the error syntax
TypeError: favorites.some is not a funcion, (In 'favorites.some(function (el) { return el === dishId; }),'favorites.some' is undefined)