CODEWITHSUNDEEP
reactjs
Aidayg24
Aidayg24

Reputation: 45

separate a page to components in react

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?

Upvotes: 1

Views: 796

Answers (1)

Shayan Shojaei
Shayan Shojaei

Reputation: 157

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.

Upvotes: 1

Related Questions