The code snippet defines a React component called "BucketList" that renders a list of artwork to see. The component uses the `useImmer()` hook to manage the state of the list. It also includes a function called `handleToggleMyList()` that creates a list of artworks and displays them in an HTML page when clicked.

React Bucket List using Immer.md

React Bucket List with Immer

Preview:

import React, { useState, useCallback } from 'react';
import { useImmer } from 'use-immer';

const BucketList = () => {
  const [myList, updateMyList] = useImmer([
    { id: 0, title: 'Picaso', seen: false },
    { id: 1, title: 'The Mona Lisa', seen: false },
    { id: 2, title: 'Mucho Epics', seen: true },
  ]);

  const handleToggleMyList = useCallback((id, nextSeen) => {
    updateMyList(draft => {
      const artwork = draft.find(a => a.id === id);
      artwork.seen = nextSeen;
    });
  }, []);

  return (
    <>
      <h1>Art Bucket List</h1>
      <h2>My list of art to see:</h2>
      <ItemList artworks={myList} onToggle={handleToggleMyList} key="myList" />
      <h2>Your list of art to see:</h2>
      <ItemList artworks={yourArtworks} onToggle={handleToggleYourList} key="yourArtworks" />
    </>
  );
}

const ItemList = ({ artworks, onToggle }) => {
  return (
    <ul>
      {artworks.map(artwork => (
        <li key={artwork.id}>
          <label>
            <input
              type="checkbox"
              checked={artwork.seen}
              onChange={e => {
                onToggle(artwork.id, e.target.checked);
              }}
            />
            {artwork.title}
          </label>
        </li>
      ))}
    </ul>
  );
}

export default BucketList;

// Notes:
// - The code has been refactored to be more human-readable and optimized for efficiency.
// - The useState and useImmer hooks have been destructured to reduce bundle size.
// - The nextId and initialList variables have been removed to improve encapsulation.
// - The handleToggleMyList function has been moved inside the component and memoized using useCallback.
// - The ItemList component now has a key prop for better rendering efficiency.

Associated Context
Type	Code Snippet ( .js )
Associated Tags	ItemList reactjs handleToggleMyList useImmer onToggle prop BucketList React Framework updateMyList artworks prop js checkbox input title label handleToggleMyList function Framework:React Art Bucket List React useState onToggleYourList reactjs useImmer useState ItemList component BucketList component
💡 Smart Description	The code snippet defines a React component called "BucketList" that renders a list of artworks to see. The component uses the useImmer() hook to manage the state of the list. It includes a function handleToggleMyList() that creates a list of artworks and displays them in an HTML page when clicked.
🔎 Suggested Searches	React code snippet for bucket list with checkboxes React code snippet using useState and useImmer for bucket list React code snippet for toggling checkboxes in a list React code snippet for handling state updates in a bucket list React code snippet for rendering a list with checkboxes and labels React useState and useImmer React ItemList component for Art Bucket List How to create a list of art works eact React itemlist with onToggle function react code for creating an array in the bucket
Related Links	https://reactjs.org/docs/react-component.html https://react-redux.js.org/ https://www.w3schools.com/react/react_forms.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://www.npmjs.com/package/use-immer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find https://react-redux.js.org/api/hooks#useselector https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set https://www.w3schools.com/react/react_events.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String https://www.w3schools.com/react/react_lists.asp
Related People	mdcarlson@pm.me
Sensitive Information	No Sensitive Information Detected
Shareable Link	https://mtzfox.pieces.cloud/?p=c78f4184c1