hooks-tutorial/src/complicated/Product/Product.js

import React, { useReducer } from 'react';
import './Product.css';

...

function cartReducer(state, action) {
  switch(action.type) {
    case 'add':
      return [...state, action.name];
    case 'remove':
      const update = [...state];
      update.splice(update.indexOf(action.name), 1);
      return update;
    default:
      return state;
  }
}

function totalReducer(state, action) {
  if(action.type === 'add') {
    return state + action.price;
  }
  return state - action.price
}

export default function Product() {
  const [cart, setCart] = useReducer(cartReducer, []);
  const [total, setTotal] = useReducer(totalReducer, 0);

  function add(product) {
    const { name, price } = product;
    setCart({ name, type: 'add' });
    setTotal({ price, type: 'add' });
  }

  function remove(product) {
    const { name, price } = product;
    setCart({ name, type: 'remove' });
    setTotal({ price, type: 'remove' });
  }

  return(
    <div className="wrapper">
      <div>
        Shopping Cart: {cart.length} total items.
      </div>
      <div>Total: {getTotal(total)}</div>

      <div>
        {products.map(product => (
          <div key={product.name}>
            <div className="product">
              <span role="img" aria-label={product.name}>{product.emoji}</span>
            </div>
            <button onClick={() => add(product)}>Add</button>
            <button onClick={() => remove(product)}>Remove</button>
          </div>
        ))}
      </div>
    </div>
  )
}
hooks-tutorial/src/complicated/Product/Product.js

import React, { useReducer } from 'react';
import './Product.css';

...

function cartReducer(state, action) {
  switch(action.type) {
    case 'add':
      return [...state, action.name];
    case 'remove':
      const update = [...state];
      update.splice(update.indexOf(action.name), 1);
      return update;
    default:
      return state;
  }
}

function totalReducer(state, action) {
  if(action.type === 'add') {
    return state + action.price;
  }
  return state - action.price
}

export default function Product() {
  const [cart, setCart] = useReducer(cartReducer, []);
  const [total, setTotal] = useReducer(totalReducer, 0);

  function add(product) {
    const { name, price } = product;
    setCart({ name, type: 'add' });
    setTotal({ price, type: 'add' });
  }

  function remove(product) {
    const { name, price } = product;
    setCart({ name, type: 'remove' });
    setTotal({ price, type: 'remove' });
  }

  return(
    <div className="wrapper">
      <div>
        Shopping Cart: {cart.length} total items.
      </div>
      <div>Total: {getTotal(total)}</div>

      <div>
        {products.map(product => (
          <div key={product.name}>
            <div className="product">
              <span role="img" aria-label={product.name}>{product.emoji}</span>
            </div>
            <button onClick={() => add(product)}>Add</button>
            <button onClick={() => remove(product)}>Remove</button>
          </div>
        ))}
      </div>
    </div>
  )
}
hooks-tutorial/src/components/App/App.js

import React from 'react';
import Product from '../Product/Product';

function App() {
  return <Product />
}

export default App;
hooks-tutorial/src/component/Product/Product.js

import React, { useState } from 'react';
...
export default function Product() {
  const [cart, setCart] = useState([]);
  const [total, setTotal] = useState(0);

  function add() {
    setCart(['ice cream']);
    setTotal(5);
  }

  return(
    <div className="wrapper">
      <div>
        Shopping Cart: {cart.length} total items.
      </div>
      <div>Total: {getTotal(total)}</div>

      <div className="product"><span role="img" aria-label="ice cream">🍦</span></div>
      <button onClick={add}>Add</button>
      <button
        onClick={() => {
          setCart([]);
          setTotal(0);
        }}
      >
        Remove
      </button>
    </div>
  )
}
Save and close the file. Now, add the component into the App component to render the Product component in the browser. Open App.js:

nano src/components/App/App.js
To try this out, open up Product.js:

nano src/components/Product/Product.js
hooks-tutorial/src/components/Product/Product.css

.product span {
    font-size: 100px;
}

.wrapper {
    padding: 20px;
    font-size: 20px;
}

.wrapper button {
    font-size: 20px;
    background: none;
    border: black solid 1px;
}
hooks-tutorial/src/components/Product/Product.js

import React from 'react';
import './Product.css';

export default function Product() {
  return(
    <div className="wrapper">
      <div>
        Shopping Cart: 0 total items.
      </div>
      <div>Total: 0</div>

      <div className="product"><span role="img" aria-label="ice cream">🍦</span></div>
      <button>Add</button> <button>Remove</button>
    </div>
  )
}
Start by creating a directory for a Product component:

mkdir src/components/Product
Next, open up a file called Product.js in the Product directory:

nano src/components/Product/Product.js
Save and close the file, then create a new file called Product.css in the Product directory:

nano src/components/Product/Product.css

Recommend

How To Manage State with Hooks on React Components Step 2 — Setting State with useState

How To Manage State with Hooks on React Components Step 1 – Setting Initial State in a Component

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Seven — Test your Results

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Six — Set Up Local Hosts File (Optional)

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Five — Enable the New Virtual Host Files

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Four — Create New Virtual Host Files Copy First Virtual Host and Customize for Second Domain

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Four — Create New Virtual Host Files Create the First Virtual Host File

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Three — Create Demo Pages for Each Virtual Host

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step Two — Grant Permissions

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Step One — Create the Directory Structure

How To Set Up Apache Virtual Hosts on Ubuntu 18.04 Prerequisites

How To Install and Use Docker on Ubuntu 16.04 Conclusion Want to learn more? Join the DigitalOcean Community! Still looking for an answer?

How To Install and Use Docker on Ubuntu 16.04 Step 8 — Pushing Docker Images to a Docker Repository

How To Install and Use Docker on Ubuntu 16.04 Step 7 — Committing Changes in a Container to a Docker Image

How To Install and Use Docker on Ubuntu 16.04 Step 6 — Managing Docker Containers

How To Install and Use Docker on Ubuntu 16.04 Step 5 — Running a Docker Container

How To Install and Use Docker on Ubuntu 16.04 Step 4 — Working with Docker Images

How To Install and Use Docker on Ubuntu 16.04 Step 3 — Using the Docker Command

How To Install and Use Docker on Ubuntu 16.04 Step 2 — Executing the Docker Command Without Sudo (Optional)

How To Install and Use Docker on Ubuntu 16.04 Step 1 — Installing Docker

How to Set Up SSH Keys on Ubuntu 18.04 Conclusion Want to learn more? Join the DigitalOcean Community! Still looking for an answer?

How to Set Up SSH Keys on Ubuntu 18.04 Step 4 — Disabling Password Authentication on your Server

How to Set Up SSH Keys on Ubuntu 18.04 Step 3 — Authenticating to Ubuntu Server Using SSH Keys

How to Set Up SSH Keys on Ubuntu 18.04 Step 1 — Creating the RSA Key Pair Copying Public Key Manually