JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Marco Abate

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.List {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 60px;
  grid-gap: 16px;
}

.List__item {
  line-height: 60px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow .3s ease,  outline .3s ease;
  outline: 0 solid white;
}

.List__item.List__item--selected {
  box-shadow: 0 0 0 5px red;
  outline: 2px solid white;
}

/* Taken from https://clrs.cc/ */

.List__item--navy {
  background-color: #001f3f;
}

.List__item--blue {
  background-color: #0074d9;
}

.List__item--aqua {
  background-color: #7fdbff;
}

.List__item--teal {
  background-color: #39cccc;
}

.List__item--olive {
  background-color: #3d9970;
}

.List__item--green {
  background-color: #2ecc40;
}

.List__item--lime {
  background-color: #01ff70;
}

.List__item--yellow {
  background-color: #ffdc00;
}

.List__item--orange {
  background-color: #ff851b;
}

.List__item--red {
  background-color: #ff4136;
}

.List__item--maroon {
  background-color: #85144b;
}

.List__item--fuchsia {
  background-color: #f012be;
}

.List__item--purple {
  background-color: #b10dc9;
}

.List__item--black {
  background-color: #111111;
}

.List__item--gray {
  background-color: #aaaaaa;
}

.List__item--silver {
  background-color: #dddddd;
}

.SelectedList {
  margin: 16px;
}

.SelectedList--no-results {
  margin: 16px;
}

.SelectedList__item {
  display: inline;
}

.SelectedList__item::after {
    content: ", ";
}

.SelectedList__item:last-child::after {
  content: "";
}

React

const { Fragment, useState, useCallback, memo, useMemo } = React;


// Implement a feature to allow item selection with the following requirements:
// 1. Clicking an item selects/unselects it.
// 2. Multiple items can be selected at a time.
// 3. Make sure to avoid unnecessary re-renders of each list item in the big list (performance).
// 4. Currently selected items should be visually highlighted.
// 5. Currently selected items' names should be shown at the top of the page.
//
// Feel free to change the component structure at will.

const ListItem = memo(({ name, color, toggleSelection, isSelected }) => {
	const onClick = useCallback(() => toggleSelection(name), [toggleSelection, name])
  
  const className = useMemo(() => {
  	let classTexts = ['List__item', `List__item--${color}`]
    if(isSelected) classTexts.push('List__item--selected')
    return classTexts.join(' ')
  }, [isSelected])

	return (
		<li className={className} onClick={onClick}>
      {name}
    </li>
  )
}, (prevProps, props) => prevProps.name === props.name && prevProps.color === props.color && prevProps.isSelected === props.isSelected)

const SelectedItem = memo(({ children }) => {
	return <li className="SelectedList__item">{children}</li>
})

const SelectedItems = ({ items }) => {
	if(items.length === 0) return <p className="SelectedList--no-results">No item selected</p>
  
	return <ul className="SelectedList">
    {items.map((item) => {
    	return <SelectedItem key={item}>{item}</SelectedItem>
    })}
	</ul>
}

const List = ({ items }) => {
	const [selectedItems, setSelectedItems] = useState([])
  
	const toggleSelection = useCallback((item) => {
		if(selectedItems.includes(item)) {
			setSelectedItems((prevSelectedItems) => prevSelectedItems.filter((itemToFilter) => itemToFilter !== item))
		} else {
			setSelectedItems((prevSelectedItems) => [...prevSelectedItems, item])
		}
	})

	return  (
		<Fragment>
		  <SelectedItems items={selectedItems}/>
		  <ul...