How do I render json data in the javascript function using map - Reactjs

Question

I'm using material-ui library to create card like items. I have the list of items stored in a js file like this:-

var Data = [
  {
    name: "Tandoori Pizza",
    image: "Images/pizza.png",
    price: "Rs.200",
    sizes: { Small: 100, Medium: 200, Large: 300 },
  },
  {
    name: "Veggie Supreme",
    image: "Images/pizza.png",
    price: "Rs.250",
    sizes: { Small: 100, Medium: 200, Large: 300 },
  }
]

And this is the function in which I wish to use Data.map(item => //something)

import Data from "./data";
    const useStyles = makeStyles({
      root: {
        maxWidth: 345,
      },
      media: {
        height: 140,
      },
    });
    function MediaCard() {
      const classes = useStyles();
      return (
        <Card className={classes.root}>
          <CardActionArea>
            <CardMedia
              className={classes.media}
              image="/static/images/cards/contemplative-reptile.jpg"
              title="Contemplative Reptile"
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="h2">
                Lizard
              </Typography>
              <Typography variant="body2" color="textSecondary" component="p">
                Lizards are a widespread group of squamate reptiles, with over 6,000
                species, ranging across all continents except Antarctica
              </Typography>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button size="small" color="primary">
              Add to Cart
            </Button>
          </CardActions>
        </Card>
      );
    }

Could someone tell me how do I write the syntax for Data.map() to render all the items present in data.js using MediaCard()?

Answer 1

You could try this, you have to loop at every item and render a component.

 const useStyles = makeStyles({
    root: {
        maxWidth: 345,
    },
    media: {
        height: 140,
    },
});
function MediaCard() {
    const Data = [
        {
            name: "Tandoori Pizza",
            image: "Images/pizza.png",
            price: "Rs.200",
            sizes: { Small: 100, Medium: 200, Large: 300 },
        },
        {
            name: "Veggie Supreme",
            image: "Images/pizza.png",
            price: "Rs.250",
            sizes: { Small: 100, Medium: 200, Large: 300 },
        },
    ];
    const classes = useStyles();
    return (
        <>
            {Data.map((item) => {
                return (
                    <Card className={classes.root}>
                        <CardActionArea>
                            <CardMedia
                                className={classes.media}
                                image={"/static/" + item.image} // put your images inside static folder.
                                title={item.name}
                            />
                            <CardContent>
                                <Typography
                                    gutterBottom
                                    variant="h5"
                                    component="h2"
                                >
                                    {item.name}
                                </Typography>
                                <Typography
                                    gutterBottom
                                    variant="h5"
                                    component="h2"
                                >
                                    Price: {item.price}
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                        <CardActions>
                            <Button size="small" color="primary">
                                Add to Cart
                            </Button>
                        </CardActions>
                    </Card>
                );
            })}
        </>
    );
}

Answer 2

I don't know what kind of information you want to put in your program, and where you would want to put it, as your two examples don't match up the best or at least don't make sense to me.

https://www.freecodecamp.org/learn/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state

This lesson comes to mind though, and seems to do exactly what you're asking for. I just don't know how you want to implement it exactly, so I can't say how I'd write the map function.

Otherwise, I'd write something like...

const cardList = Data.map(x => {
   return (<li><CardMedia
              className={Data.name}
              image={Data.image}
              title={Data.name}
            /></li>);
});

And somewhere else in your program, you can just pop cardList inside another space, like so...

<ul>{cardList}<ul>

Unfortunately, without a better example I can't say what more I could do. As is, you don't have a render() function in there or any kind of state, which you could use to store your imported data.

Answer 3

You want to make MediaCard responsible for one item only. Create a higher level component that maps an array of <MediaCard/> items.

That higher level component can then also be used to do filtering of the data array to only render items that meet a specific criteria such as category or price or??

Following is a simple list example using a <MenuList/> that maps a simplified version of your MediaCard

 const App = () => { return ( <div> <h3>Menu</h3> <MenuList/>; </div> ); } const MenuList = () => { const [items, setItems] = React.useState(Data); return ( <div> <div>Some filters here for various categories or price filter</div> <ul>{items.map((item) => (<MediaCard item={item} />))}</ul> </div> ); }; const MediaCard = ({ item }) => { return ( <li> <h4>{item.name}</h4> <div>Price: {item.price}</div> </li> ); }; // Render it ReactDOM.render( <App />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> <script> var Data=[{name:"Tandoori Pizza",image:"Images/pizza.png",price:"Rs.200",sizes:{Small:100,Medium:200,Large:300}},{name:"Veggie Supreme",image:"Images/pizza.png",price:"Rs.250",sizes:{Small:100,Medium:200,Large:300}}]; </script>