Сделали практику с карточками продуктов

src/App.jsx

@@ -1,4 +1,5 @@
 import styles from './styles/App.module.scss'
+import React from 'react'
 
 function Person({ name, age }) {
     return (
@@ -9,16 +10,40 @@ function Person({ name, age }) {
     )
 }
 
+function ProductCard({title, price, background}) {
+    return (
+        <div style={{
+                backgroundColor: background,
+                border: '1px solid gray',
+                padding: '10px',
+                borderRadius: '10px',
+                width: '250px',
+                marginTop: '15px',
+            }}>
+            <h3>{title}</h3>
+            <p>Цена: {price}</p>
+        </div>
+    )
+}
+
 function App() {
-    const options = {title:'Меню', width: 100, height: 200}
+    const [price1, setPrice1] = React.useState(1000);
-    let {width, title, height} = options;
+    const [bgColor2, setBgColor2] = React.useState('#ffe6e6');
-    console.log(title);
+    
-    console.log(width);
+    const changePrice1 = () => setPrice1(cur => cur + 100);
-    console.log(height);
+    const changeBgColor2 = () => {
+        const colors = ['#ffe6e6','#00e6e6','#ffefe6','#00f6f6'];
+        const random = colors[Math.floor(Math.random() * colors.length)];
+        setBgColor2(random);
+    }
+    
 	return (
 		<>
-            <Person name="Alex" age={28} />
+            <h2>Практика Props</h2>
-            <Person name="Bob" age={35} />
+            <button onClick={changePrice1}>Изменить цену товара 1</button>
+            <button onClick={changeBgColor2}>Изменить цвет товара 2</button>
+            <ProductCard title="Товар 1" price={price1} background="#ffffff" />
+            <ProductCard title="Товар 2" price={500} background={bgColor2} />
 		</>
 	)
 }