1.

Build a React component called Gadgets that receives an array of products as a

prop. Render each product’s name, description, and price as an ordered list. Add a
border around the product details which has price above 50000.

Gadgets.jsx
import React from 'react';
const Gadgets = ({ products }) => {
return (
<div>
<h1>Gadgets List</h1>
<ol>
{products.map((product, index) => (
<li
key={index}
style={{
border: product.price > 50000 ? '2px solid black' : 'none',
padding: '10px',
marginBottom: '10px',
}}
>
<h2>{product.name}</h2>
<p>{product.description}</p>
<p><strong>Price: </strong>${product.price}</p>
</li>
))}
</ol>
</div>
);
};
export default Gadgets;

App.js
const products = [
{
name: 'Smartphone',
description: 'Latest model with advanced features.',
price: 45000,
},
{
name: 'Laptop',
description: 'High-performance laptop for gaming and work.',
price: 60000,
},
{
name: 'Smartwatch',
description: 'Tracks your health and syncs with your phone.',
price: 20000,
},
];

function App() {
return (
<div>
<Gadgets products={products} />
 </div>
);
}

export default App;

2. How can you use state and props in a weather application to pass a location to a
component, update the location via a form input, and pass the updated location to
the child component?

WeatherApp.jsx (Parent Component)

import React, { useState } from 'react';

import WeatherDisplay from './WeatherDisplay';

const WeatherApp = () => {

// Step 1: Define the state for location
const [location, setLocation] = useState('New York');

// Step 2: Handle the form input change

const handleLocationChange = (e) => {
setLocation(e.target.value);
};

return (
<div>
<h1>Weather Application</h1>

{/* Step 3: Create a form to update the location */}

<form>
<input
type="text"
value={location}
onChange={handleLocationChange}
placeholder="Enter a location"
/>
</form>

{/* Step 4: Pass the location to the child component via props */}
<WeatherDisplay location={location} />
</div>
);
};

export default WeatherApp;

WeatherDisplay.jsx (Child Component)

import React, { useEffect, useState } from 'react';

const WeatherDisplay = ({ location }) => {

const [weatherData, setWeatherData] = useState(null);

// Fetch weather data based on the location passed via props

 useEffect(() => {
if (location) {
// Placeholder URL for fetching weather data
fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${location}`)
.then(response => response.json())
.then(data => setWeatherData(data));
}
}, [location]); // Re-run the effect whenever location changes

return (
<div>
<h2>Weather in {location}</h2>
{weatherData ? (
<div>
<p>Temperature: {weatherData.current.temp_c}°C</p>
<p>Condition: {weatherData.current.condition.text}</p>
</div>
):(
<p>Loading weather data...</p>
)}
</div>
);
};

export default WeatherDisplay;

3. An e-commerce website built using React, where we can filter clothes products using
their customer preferred sizes as M, L or XL etc. We have a button called “Add to cart”
below each product shown on the web page, once user selects any product, it will go to
cart. At the end it can be used to checkout.

App.js
import React, { useState } from 'react';
import ProductList from './components/ProductList';
import Cart from './components/Cart';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
const [cart, setCart] = useState([]);
// Function to add items to the cart
const addToCart = (product) => {
setCart([...cart, product]);
};
return (
<Router>
<div>
<h1>Welcome to the E-commerce Site</h1>
<Switch>
<Route exact path="/">
<ProductList addToCart={addToCart} />
</Route>
<Route path="/cart">
<Cart cart={cart} />
</Route>
 </Switch>
</div>
</Router>
);
}
export default App;

ProductList.jsx
import React, { useState } from 'react';
import Product from './Product';
const products = [
{ id: 1, name: 'T-shirt', size: 'M', price: 20 },
{ id: 2, name: 'Jeans', size: 'L', price: 40 },
{ id: 3, name: 'Jacket', size: 'XL', price: 60 },
{ id: 4, name: 'Shoes', size: 'M', price: 50 },
];
const ProductList = ({ addToCart }) => {
const [selectedSize, setSelectedSize] = useState('All');
const handleSizeFilter = (event) => {
setSelectedSize(event.target.value);
};
const filteredProducts = selectedSize === 'All' ? products : products.filter(product => product.size
=== selectedSize);
return (
<div>
<div>
<label htmlFor="size-filter">Filter by size: </label>
<select id="size-filter" onChange={handleSizeFilter}>
<option value="All">All</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
<div className="product-list">
{filteredProducts.map((product) => (
<Product key={product.id} product={product} addToCart={addToCart} />
))}
</div>
</div>
);
};
export default ProductList;

Product.jsx
import React from 'react';
const Product = ({ product, addToCart }) => {
return (
<div className="product-card">
<h3>{product.name}</h3>
<p>Size: {product.size}</p>
<p>Price: ${product.price}</p>
<button onClick={() => addToCart(product)}>Add to Cart</button>
</div>
);
};
export default Product;

Cart.jsx
import React from 'react';
const Cart = ({ cart }) => {
const total = cart.reduce((acc, product) => acc + product.price, 0);
return (
<div>
<h2>Your Cart</h2>
<ul>
{cart.length === 0 ? (
<p>Your cart is empty</p>
):(
cart.map((item, index) => (
<li key={index}>
{item.name} - ${item.price}
</li>
))
)}
</ul>
{cart.length > 0 && (
<>
<p>Total: ${total}</p>
<button onClick={() => alert('Proceeding to checkout!')}>Checkout</button>
</>
)}
</div>
);
};
export default Cart;

CSS
.product-list {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.product-card {
border: 1px solid #ccc;
padding: 20px;
width: 150px;
}

button {
padding: 10px;
margin-top: 10px;
cursor: pointer;
}

4. How can you use state and props in a travel application to pass a location to a
component, update the location via a form input, and pass the updated location to the
child component?
App.js (Parent Component)
import React, { useState } from 'react';
import LocationDisplay from './LocationDisplay';
const App = () => {
// Step 1: Manage location state in the parent component
const [location, setLocation] = useState('');

// Step 2: Function to handle input change

const handleInputChange = (event) => {
setLocation(event.target.value);
};
return (
<div>
<h1>Travel Application</h1>

{/* Step 3: Form to input the location */}

<form>
<label htmlFor="location">Enter Location:</label>
<input
type="text"
id="location"
value={location}
onChange={handleInputChange}
/>
</form>
{/* Step 4: Pass location as a prop to the child component */}
<LocationDisplay location={location} />
</div>
);
};
export default App;

LocationDisplay.jsx (Child Component)

import React from 'react';

// Step 5: The child component receives the location as a prop

const LocationDisplay = ({ location }) => {
return (
<div>
<h2>Selected Location:</h2>
<p>{location ? location : "No location selected"}</p>
</div>
);
};
export default LocationDisplay;
CSS
form {
margin-bottom: 20px;
}

input {
padding: 8px;
font-size: 16px;
}
h2 {
color: blue;
}