Create an online shop using React - part 1

let productList = [    {        "id":"2e36e6a6-21f5-46af-a16f-9b9d57fc9dcf",        "name":"Handcrafted Fresh Towels",        "price":"$223.00",        "shortDescription":"Officiis ab optio consequuntur quidem et excepturi debitis.",        "description":"Dolorem omnis qui omnis. Dolores occaecati autem aliquam nihil in non repellendus. Asperiores vel qui voluptatem qui aliquid. Vel sunt eos porro qui sed aliquam autem amet. Ea iure fugit animi est qui neque.",        "image":"https://picsum.photos/id/1/500/500/",        "category":"Music"    },    {        "id":"30f4b1e9-4db7-4e01-8f95-f12d023e24df",        "name":"Incredible Rubber Mouse",        "price":"$125.00",        "shortDescription":"Quia facere odit voluptate.",        "description":"Necessitatibus minus repellendus quo aut voluptatem et. Et earum non sequi sed aut nulla. Sit velit ratione totam nemo qui ipsam delectus aut aut. Expedita voluptas aut dolores est fuga.",        "image":"https://picsum.photos/id/10/500/500/",        "category":"Garden"    },    {        "id":"25164bd3-552c-402f-9b56-94306726e812",        "name":"Handcrafted Frozen Chair",        "price":"$133.00",        "shortDescription":"Ex magni rerum voluptas.",        "description":"Aliquid animi et iste eos aperiam necessitatibus est. Eum consectetur velit veritatis sequi praesentium voluptatem eum. Vel est sapiente quae. Non quas nam id adipisci hic voluptatem et. Amet nam adipisci consequatur quo molestias doloremque molestias.",        "image":"https://picsum.photos/id/100/500/500/",        "category":"Health"    },    {        "id":"1009923d-e700-4a56-affc-6d39360547e8",        "name":"Gorgeous Frozen Salad",        "price":"$251.00",        "shortDescription":"Eaque velit eum ut ad.",        "description":"Placeat in magni recusandae velit dignissimos reprehenderit ea. Harum cumque alias enim quia consequatur et tenetur.",        "image":"https://picsum.photos/id/1000/500/500/",        "category":"Kids"    },    {        "id":"985e78f7-371f-4d8d-9482-f35ca105403e",        "name":"Handcrafted Cotton Ball",        "price":"$267.00",        "shortDescription":"Est voluptates est ex fuga et itaque.",        "description":"Qui iusto dicta enim pariatur. Eveniet minus reprehenderit rerum occaecati quis sed rem sunt saepe. Alias sapiente officiis in. Quia necessitatibus aspernatur aut magni quasi. Est in enim mollitia est sunt officiis modi et sit. Nam necessitatibus veritatis repellendus deleniti maiores dignissimos.",        "image":"https://picsum.photos/id/1001/500/500/",        "category":"Movies"    }];

<section className="products">                {productList.map(product => (                    <div className="card">                        <div className="card-image">                            <img src={product.image} alt={product.name} />                        </div>                        <div className="card-body">                            <h3>{product.name}</h3>                            <p>{product.description}</p>                            <p className="price">{product.price}</p>                            <a href="#" className="btn">                                Add to cart                            </a>                        </div>                    </div>                ))}</section>

const randomItem = Math.floor(Math.random() * productList.length);    const promotedProduct = productList[randomItem];    promotedProduct.newPrice = Math.round(parseInt(promotedProduct.price.substring(1)) / 2);    const monthNames = ["January", "February", "March", "April", "May", "June",                         "July", "August", "September", "October", "November", "December"];    const today = new Date();    const monthName = monthNames[today.getMonth()];    const formatedDate = `${today.getDate()} ${monthName}`;

<section className="promotion">                <h2>Don't miss today's hot deal!</h2>                <div className="card">                    <div className="card-image">                        <img src={promotedProduct.image} alt={promotedProduct.name} />                    </div>                    <div className="card-body">                        <h3>{promotedProduct.name}</h3>                        <p>{promotedProduct.shortDescription}</p>                        <p className="old-price">{promotedProduct.price}</p>                        <p>                            <span>${promotedProduct.newPrice}</span> only on {" "}                            <span>{formatedDate}</span>                        </p>                        <a href="#" className="btn">                            Buy now                        </a>                    </div>                </div></section>