separate a page to components in react - reactjs

Question

this is one of my pages in react app and it shows everything ok:
const showAllFavorite = (props) => {
const [favorites, setFavorites] = useState([]);
useEffect(async () => {
const resp = await generalGet({}, '/favorite');
setFavorites(resp.data);
}, [])
return(
<React.Fragment>
<MainMenu title="favorites" history={props.history}/>
<div className="container mt-4">
<div className="d-flex flex-wrap">
{
favorites.map(fav => (
<div style={{flex: '50%'}}>
<Link
to={`/recipe/${fav.id}`}
key={fav.id}
>
<FoodItem
className="foodItem"
name={fav.name}
cover={fav.cover}
width={'auto'}
/>
</Link>
</div>
))
}
</div>
</div>
</React.Fragment>
)
}
export default showAllFavorite;
but when I want to code like this it doesn't show anything :
const showAllFavorite = (props) => {
const [favorites, setFavorites] = useState([]);
useEffect(async () => {
const resp = await generalGet({}, '/favorite');
setFavorites(resp.data);
}, [])
return(
<showFoodItems title={"favorite"} items={favorites} history={props.history} />
)
}
export default showAllFavorite;
and my showFoodItem component:
const showFoodItems= ({title , items , history}) => {
return(
<React.Fragment>
<MainMenu title={title} history={history}/>
<div className="container mt-4">
<div className="d-flex flex-wrap">
{
items.map(item => (
<div style={{flex: '50%'}}>
<Link
to={`/recipe/${item.id}`}
key={item.id}
>
<FoodItem
className="foodItem"
name={item.name}
cover={item.cover}
width={'auto'}
/>
</Link>
</div>
))
}
</div>
</div>
</React.Fragment>
)
}
export default showFoodItems;
I want to do this because I want to use the showFoodItems component many times in my app.
I checked the network tab and data is receiving from server. do you have any idea?

Answer 1

The problem is most likely with your component names.
React treats components that start with lower case letters as DOM tags so changing the names to ShowAllFavorite and ShowFoodItems should fix your issue.
You can read more about the reasoning behind this in React's documents here.