React Hooks Samples

AddShoppingList.js

const ShoppingList = () => {
    const itemsList = useArray(["Apples","Bananas","Milk"]);
  return (
    <div>
        <p>Shopping List</p>
        <button onClick={()=> itemsList.add(Math.random())}>
            Add
        </button>
          {itemList.value.map((item, index) => {
              return   <li key={index} >
                        {item}
                        <button onClick={() => itemsList.removeByIndex(index)}>Delete</button>
                       </li>;
                })}
        <button onClick={itemsList.clear}>Clear</button>
         )}
      
    </div>
  );
};

App.js

const { useState } = React

const App = () => {
  const [name, setName] = useState('Bananas');
  const [quantity, setQuantity] = useState(0);
  
  handleInput = (event) => {
    setName(event.target.value);
  }
  
  addItem = (event) => {
    event.preventDefault();
    setName('');
    setQuantity(0);
  }
  
  return (
    <div className="name">
      <p><span>Shopping List</span></p>
      <div>
        <input type="text" value={name} name="itemName" onChange={handleInput} />
        <label for="itemName">Item Name</label>
        <div className="wrapper">
          
          <div onClick={() => setQuantity(quantity + 1)}>+</div>
                <span className="count">{quantity}</span>
                <div onClick={() => setQuantity(quantity - 1)}>-</div>
          
        </div>
        <button onClick={addItem}>Add</button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"));

ArrayUtil.js

import { useCallback, useState} from 'react';
 
export const useArray = initial => {
    const [value, setValue] = useState(initial);
    return {
        value,
        setValue,
        add: useCallback(a => setValue(v => [...v, a])),
        clear: useCallback(() => setValue(() => [])),
        removeById: useCallback(id => 
            setValue(arr => arr.filter(arr => arr.id !== id))),
            
        };
};

ShoppingList.js

const ShoppingList = () => {
  const { itemList } = useContext(ShoppingContext);
  return (
    <div>
        <p>Shopping List</p>
      {itemList.map((item, index) => {
          return   <div key={index} ><div className="wrapper">
          <span >{item.name}</span>
          <span>{item.quantity}</span>
        </div>
        </div>
      })}
      
    </div>
  );
};

useContextSample.js

const App = () => {
  const [name, setName] = useState('Bananas');
  const [quantity, setQuantity] = useState(0);
  const [itemList, setItemList] = useState([]);
  
  const handleInput = (event) => {
    setName(event.target.value);
  }
  
 const addItem = (event) => {
    event.preventDefault();
    const aList = Array.from(itemList);
    aList.push({
      name:name,
      quantity:quantity
    });
    setItemList(aList);
  }
  
  return (
    <div className="name">
      <ShoppingContext.Provider  value={{itemList}} >
             
              <ShoppingList />        
              <div>
                <p><span>Add Item</span></p>
                <input type="text" value={name} name="itemName" onChange={handleInput} />
                <label for="itemName">Item Name</label>
                <div className="wrapper">
                  
                  <div onClick={() => setQuantity(quantity + 1)}>+</div>
                        <span className="count">{quantity}</span>
                        <div onClick={() => setQuantity(quantity - 1)}>-</div>
                </div>
                <button onClick={addItem}>Add</button>
              </div>
       
      </ShoppingContext.Provider>
 
    </div>
  )

useEffectSample.js

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

useEffectSample2.js

useEffect(() => {
    const timer = setTimeout(() =>{
        if(query === inputRef.current.value){
             sendAPIRequest('https://sample.server.com/data.json'+query, 'GET' );
        }
    }, 500);
  return () => {clearTimeout(timer)}
}, [query, sendAPIRequest, inputRef]);