Scribd Logo
Upload

Welcome to Scribd!

  • 1 views

    Experiment 11

    Uploaded by

    bonigisaikumar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Experiment 11

    Uploaded by

    bonigisaikumar
    1 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    1 views2 pages

    Experiment 11

    Uploaded by

    bonigisaikumar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 2

    EXPERIMENT-1

    1. Create a React component called ProductList that receives an array of


    products as props and renders a list of product items. Each product
    item should display the product name, price, and a button to add the
    product to the cart. Implement the functionality to update the cart
    when a product is added.

    import React, { useState } from 'react';

    const ProductList = ({ products }) => {


    const [cart, setCart] = useState([]);

    const addToCart = (product) => {


    setCart([...cart, product]);
    };

    return (
    <div>
    <h2>Product List</h2>
    {products.map((product, index) => (
    <li key={index}>
    <span>{product.name} - ${product.price}</span>
    <button onClick={() => addToCart(product)}>Add to Cart</button>
    </li>
    ))}
    </ul>
    <h2>Cart</h2>
    <ul>
    {cart.map((item, index) => (
    <li key={index}>
    {item.name} - ${item.price}
    </li>
    ))}
    </ul>
    </div>
    );
    };

    export default ProductList;


    2.Create a React component called TodoList that receives an array of
    todo items as props. Each todo item should have a title and a
    completed status. Render the todo items as a list with checkboxes
    indicating the completion status. Implement the functionality to toggle
    sthe completion status when a checkbox is clicked.

    import React from 'react';

    const TodoList = ({ todos }) => {


    const toggleTodo = (index) => {
    const updatedTodos = todos.map((todo, i) => {
    if (i === index) {
    return { ...todo, completed: !todo.completed };
    }
    return todo;
    });
    // Update state or dispatch an action to update state
    // For simplicity, I'll just log the updated todos here
    console.log(updatedTodos);
    };

    return (
    <div>
    <h2>Todo List</h2>
    <ul>
    {todos.map((todo, index) => (
    <li key={index}>
    <input
    type="checkbox"
    checked={todo.completed}
    onChange={() => toggleTodo(index)}
    />
    <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
    {todo.title}
    </span>
    </li>
    ))}
    </ul>
    </div>
    );
    };

    export default TodoList;

    You might also like