DEV Community: Steve Clark 🤷‍♀️

React Tutorial — City/State Lookup using the US Postal Service API

Steve Clark 🤷‍♀️ — Thu, 17 Dec 2020 14:58:29 +0000

Introduction

User experience applies to every part of a website, including forms. You have to pay attention to accessibility, ease of use, and convenience. A form with good UX is easy to understand and easy to use. Who likes filling in forms? Umm, nobody! Using this thought process, I began to research what can I do to make an applicant form at the Vets Who Code website easier to use. I thought a good idea would to make the city and state self populate based on a user's U.S. Postal Code (Applicants are all veterans of US Forces). I started studying solutions. One was to use ZipCodeAPI but they charge for more than 10 requests per hour, and I am not in a position to pay for their service. Here at Vets Who Code, we like to build our own tools. I immediately thought, "How hard can it be to make my own zip code API for our use?" It appears it's not hard to get the basic functionality using the United States Postal Service's Web Tools, a 100% free, U.S. tax-payer-funded service.

Here is what we are going to be building: https://citystatelookup.netlify.app/

Goal

🔲 Build a tool using React to fetch the city and state of user based on zipcode.
🔲 Determine if entered zipcode is 5-digits.
🔲 Determine if zipcode is valid.
🔲 If the zipcode is valid, display city and state in the city/state input boxes.
🔲 Add animation as the API "loads" the city and state.

Front-end

🔲 React for building the user interface
🔲 Fetch API to GET items from the serverless function

Backend

🔲 Use Netlify Dev to create a serverless function
🔲 Process zip code to xml data and request to API
🔲 GET data from API

Prerequisites

✅ A basic understanding of HTML, CSS, and JavaScript.
✅ A basic understanding of the DOM.
✅ Yarn or npm & Nodejs installed globally.
✅ For the above three steps this overview of React by Tania Rascia is a great start. => https://www.taniarascia.com/getting-started-with-react/
✅ netlify-cli installed globally. npm i -g netlify-cli or yarn add netlify-cli
✅ Sign up for USPS Web Tools.
✅ A code editor (I'm using VS Code) I will do my best to show everything else.
✅ Netlify account.
✅ Github account.

Typing vs Copying and Pasting Code

I am a very big believer in typing code out that you intend to use for anything. Typing code versus copypasta provides a better learning return on investment because we're practicing instead of just reading. When we copy code without understanding it, we have a lesser chance of understanding what is happening. While it's nice to see our outcomes immediately the reward comes from understanding what we are doing. With that said, please don't copy and paste the code from this tutorial. Type. Everything. Out. You'll be a better programmer for it, trust me.

CORS 😈

Loading publicly accessible APIs from the frontend during development presents some problems. Mainly Cross-Origin Resource Sharing (CORS). CORS is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts.

Ever seen this error?

Setup

Going under the assumption that you have a basic understanding of HTML, CSS, and JavaScript, I am assuming you have installed npm or yarn, the latest version of node, React, netlify-cli, have a GitHub and Netlify account, and have registered to use USPS WebTools.

Create a new repo on github.
Create a new React site by typing npx create-react-app <new-github-repo-name>
Navigate to your new folder by typing cd <new-github-repo-name>
Delete all the boilerplate React code in App.js, so you're left with this:



import React from "react";
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

This is one part you are allowed to copy and paste data. Delete all the CSS code in App.css.
Copy and paste the CSS code from this link => App.css.
Push the code to Github to the repo you created earlier using these instructions => https://docs.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line
Go to app.netlify.com and login. Follow the instructions here to add your new site from Git => https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/

You should now be setup to start the tutorial

Frontend Form

First, let's start our development server. Type yarn start or npm start into your terminal.

Since we are trying to fetch a city and state we need to create a form.

In the code below, we set a couple states using the React useState() hooks. We also set an initial value for the cityState so it starts as an empty string.

We also added <code> so we can view our inputs as they are updated. (This can be removed later)

City and state input boxes are disabled because we do not want our user to have the ability to change it. You can also use the readonly attribute as well. The difference is minor but may make a difference depending on the end state of your form and accessibility needs. A readonly element is just not editable, but gets sent when the form submits. A disabled element isn't editable and isn't sent on submit. Another difference is that readonly elements can be focused (and getting focused when "tabbing" through a form) while disabled elements cannot.

If you notice, there is nothing to submit the form because we are going to update the city and state as the user types into the zipcode input. You will also notice that you can't actually type anything into the form. We will fix this next.

App.js



import React, { useState } from "react";
import "./App.css";

function App() {
  const initialCityState = { city: "", state: "" };
  const [cityState, setCityState] = useState(initialCityState);
  const [zipcode, setZipcode] = useState("");
  return (
    <div className="App">
      <h1>City/State Lookup Tool</h1>
      <form action="" className="form-data">
        <label htmlFor="zip">Type Zip Code Here</label>
        <input
          className="zip"
          value={zipcode}
          placeholder="XXXXX"
          type="text"
          name="zip"
          id="zip"
        />
        <label htmlFor="city">City</label>
        <input
          className={`city`}
          value={cityState.city}
          type="text"
          name="city"
          disabled
          id="city"
        />
        <label htmlFor="state">State</label>
        <input
          className={`state`}
          value={cityState.state}
          type="text"
          name="state"
          disabled
          id="state"
        />
      </form>
      <pre>
        <code>
          {JSON.stringify({
            zipcode: zipcode,
            city: cityState.city,
            state: cityState.state,
          })}
        </code>
      </pre>
    </div>
  );
}

export default App;

If you typed everything correctly, you should see this:

Let's add a little action to this form.

We add an onChange handler to our zipcode element so that we can update the zipcode.

We destructured the value from event.target.value to make it easier to read.

We also add some validation and an input mask; this way we can insure that a user will only enter numbers and that it will only be five numbers (The length of US Postal Codes). The value.replace(/[^\d{5}]$/, "").substr(0, 5)) block has a regular expression to only allow numbers and the substr will only allow five in the form.

As you type in the form the code block at the bottom will update the zipcode.

App.js



<input
  className="zip"
  value={zipcode || ""}
  placeholder="XXXXX"
  type="text"
  name="zip"
  id="zip"
  onChange={(event) => {
    const { value } = event.target;
    setZipcode(value.replace(/[^\d{5}]$/, "").substr(0, 5));
  }}
/>

This is what you should be left with:

Netlify Functions

The previously installed netlify-cli package comes with some cool tools. One of them creates a serverless function that acts as a go between the frontend and an API that the app is trying to connect with. To interface with Netlify follow these steps:

netlify init - This command is going to set off a chain of events. Firstly, it is going to ask for permission to access Netlify on your behalf. I would recommend clicking "Authorize". Close the browser and then return to your editor.
Next, Netlify is going to ask if you want to create a Netlify site without a git repo. Click "No, I will connect this directory with Github first. Follow the instructions. It's going to walk you through the process of setting up a new repo and pushing it up to your repo.
Type netlify init again.
Select Create & configure a new site. Part of the prerequisites required creating a Netlify account. This part will log you in to Netlify. After that, select your 'team'.
Name your site. It has a naming convention of only alphanumeric characters only; something like city-state-lookup-tool would work.
You'll now have your partially completed app online.
Next, select Authorize with Github through app.netlify.com. A new page will open asking you to allow Netlify access to your repo. Once you allow access, you can close that browser window.
The Netlify tool is going to ask you the build command for your site. For yarn it CI=false yarn build, for npm it's CI=false npm run build. The CI=false flag preceding the build command will stop treating warnings as errors, which will prevent your site from being built.
Directory to deploy? leave blank
Netlify functions folder? type functions
No netlify.toml detected. Would you like to create one with these build settings? Type Y
After this a series of steps will happen and you'll end up with Success! Netlify CI/CD Configured!.

A new file should have been created named netlify.toml. If you open it up it should look similar to this:



[build]
  command = "CI=false yarn build"
  functions = "functions"
  publish: "."

Serverless Functions

To talk to our back end without any CORS issues we need to create a serverless function. A serverless function is an app that runs on a managed server, like AWS or in this case, Netlify. The companies then manage the the server maintenance and execution of the code. They are nice because the serverless frameworks handle the go between a hosted API and the frontend application.

In your terminal type netlify functions:create.
Typing this will create a dialog. Select node-fetch
Name your function something easy to remember like getCityState. If you observe, we now have a new folder located at the root of your directory named functions. In it should be the generated file named getCityState.js with a node_modules folder, and a few other files.
Open the getCityState.js file and delete the content below const fetch = require("node-fetch")

In the getCityState.js file add a couple of constants. One is for the secret key which we'll handle soon, one is for the API request link, and the last one is HTML headers which the frontend needs to handle permission to read what the function returns.

getCityState.js



const fetch = require("node-fetch");

const USER_ID = process.env.REACT_APP_USERID;
const BASE_URI =
  "http://production.shippingapis.com/ShippingAPITest.dll?API=CityStateLookup&XML=";
const config = {
  headers: {
    "Content-Type": "text/xml",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true,
    "Access-Control-Allow-Methods": "GET",
  },
  method: "get",
};

Below that add the main function:

getCityState.js



exports.handler = async function (event, context) {
  // The zipcode is sent by the frontend application. 
  // This is where we use it.
  const zipcode = event.queryStringParameters.zipcode;

  // The xml variable is the string we are going to send to the
  // USPS to request the information
  const xml = `<CityStateLookupRequest USERID="${USERID}"><ZipCode ID="0"><Zip5>${zipcode}</Zip5></ZipCode></CityStateLookupRequest>`;
  try {
    // Using syntactic sugar (async/await) we send a fetch request
    // with all the required information to the USPS.
    const response = await fetch(`${BASE_URI}${xml}`, config);
    // We first check if we got a good response. response.ok is
    // saying "hey backend API, did we receive a good response?"
    if (!response.ok) {
      // If we did get a good response we store the response
      // object in the variable
      return { statusCode: response.status, body: response };
    }
    // Format the response as text because the USPS response is
    // not JSON but XML
    const data = await response.text();
    // Return the response to the frontend where it will be used.
    return {
      statusCode: 200,
      body: data,
    };
    // Error checking is very important because if we don't get a
    // response this is what we will use to troubleshoot problems
  } catch (err) {
    console.log("Error: ", err);
    return {
      statusCode: 500,
      body: JSON.stringify({ msg: err.message }),
    };
  }
};

Add a new file named .env the root of the project and add your user information from the USPS. When you signed up they should have sent an email with this information. The title of the email should be similar to Important USPS Web Tools Registration Notice from registration@shippingapis.com

.env

In the .env file:



# USPS API Info:
REACT_APP_USERID="1234567890123"

IMPORTANT!!!
ADD YOUR .ENV FILE TO THE .gitignore FILE

Putting it all together

Up to this point, we've created a form where we can enter a zip code, sanitized our input, created a repo on Github, connected the repo to Netlify, and created a serverless function. Now it's time to put it all together and get some info from the USPS to display the city and state of the entered zip code by "fetching" the data.

In App.js import useEffect and add the useEffect hook

App.js



import React, { useState, useEffect } from "react";

function App() {
  const initialCityState = { city: "", state: "" };
  const [cityState, setCityState] = useState(initialCityState);
  const [zipcode, setZipcode] = useState("");

  useEffect(() => {
    // Creating a new function named fetchCityState. 
    // We could have this outside the useEffect but this 
    // makes it more readable.
    const fetchCityState = async () => {
      // We are using a try/catch block inside an async function
      // which handles all the promises
      try {
        // Send a fetch request to the getCityState serverless function
        const response = await fetch(
          `/.netlify/functions/getCityState?zipcode=${zipcode}`,
          { headers: { accept: "application/json" } }
        );
        // We assign data to the response we receive from the fetch
        const data = await response.text();
        console.log(data)
        // Using a spread operator is an easy way to populate our city/state
        // form
        setCityState({...cityState, city: data, state: "" )
        // The catch(e) will console.error any errors we receive
      } catch (e) {
        console.log(e);
      }
    };
    // Run the above function
    fetchCityState();
    //The optional array below will run any time the zipcode
    // field is updated
  }, [zipcode]);
}

Let's go ahead and restart our development server, except this time use netlify dev instead of yarn start or npm start. We're using this command now because Netlify is going to start taking over things like the connection to our getCityState serverless function.

This is what you should see:

If you type anything into the Zip Code field the <code> block below the form should update to show the city and state in the <?xml> field. Small problem though, we want to be able to use it. We'll take care of this next.

Parsing XML to JSON

There are many tools out there to parse xml to json but I wanted a native solution. Sure, many of the tools out there cover edge cases but since we know what we are getting back from the USPS, I thought a more native solution to the problem would be better. As it stands this is what we are sending to the USPS:

xml sent



<CityStateLookupRequest USERID="XXXXXXXXXXXX">
  <ZipCode ID="90210">
    <Zip5>20024</Zip5>
  </ZipCode>
</CityStateLookupRequest>

...and this is what we receive in the response:

xml response



"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<CityStateLookupResponse><ZipCode ID=\"0\"><Zip5>90210</Zip5><City>BEVERLY HILLS</City><State>CA</State></ZipCode></CityStateLookupResponse>"

Which is a stringified version of xml.

So how do we go about going from the stringified xml to something like this?

json



[{ "ZipCode": 910210, "City": "BEVERLY HILLS", "State": "CA" }]

DEV to the rescue!

I followed along with this article written by Nitin Patel

Nitin PatelFollow

/niinpatel

Link to Nitin Patel article

Converting XML to JSON using Recursion

Nitin Patel ・ Sep 28 '18

#xml #json #javascript

According to the article:

Since, XML has a lot of nested tags, this problem is a perfect example of a practical application of recursion.

An elegant solution to a difficult problem. It uses the DOMParser Web API which according to the documentation it...

parses XML or HTML to source code from a string into a DOM TREE.

Here's the function from the article:

xml2json.js



function xml2json(srcDOM) {
  let children = [...srcDOM.children];

  // base case for recursion.
  if (!children.length) {
    return srcDOM.innerHTML;
  }

  // initializing object to be returned.
  let jsonResult = {};

  for (let child of children) {
    // checking is child has siblings of same name.
    let childIsArray =
      children.filter((eachChild) => eachChild.nodeName === child.nodeName)
        .length > 1;

    // if child is array, save the values as array, 
    // else as strings.
    if (childIsArray) {
      if (jsonResult[child.nodeName] === undefined) {
        jsonResult[child.nodeName] = [xml2json(child)];
      } else {
        jsonResult[child.nodeName].push(xml2json(child));
      }
    } else {
      jsonResult[child.nodeName] = xml2json(child);
    }
  }

  return jsonResult;
}

Let's type this into our App.js file right below the import statement.

We now have the last piece of our puzzle and should be able to parse the response from the USPS to something we can use.

Update the fetchCityState function inside the useEffect hook, and add the DOMParser

App.js



const initialCityState = { city: "", state: "" };

// Add a new DomParser API object
const parser = new DOMParser();

const [cityState, setCityState] = useState(initialCityState);
const [zipcode, setZipcode] = useState("");

useEffect(() => {
  const fetchCityState = async () => {
    try {
      const response = await fetch(
        `/.netlify/functions/getCityState?&zipcode=${zipcode}`,
        {
          headers: { accept: "application/json" },
        }
      );
      const data = await response.text();

      // Use the DOMParser here. Remember it returns a DOM tree
      const srcDOM = parser.parseFromString(data, "application/xml");

      // Use the xml2json function
      const res = xml2json(srcDOM);

      // Let's see where we're at
      console.log(res);

      // Reset the city and state to empty strings.
      setCityState({ ...cityState, city: "", state: "" });
    } catch (e) {
      console.log(e);
    }
  };
  fetchCityState();
}, [zipcode]);

Here's what you should have in the console:



{
  "CityStateLookupResponse": {
    "ZipCode": {
      "Zip5": "90210",
      "City": "BEVERLY HILLS",
      "State": "CA"
    }
  }
}

Now we have something to work with! An actual object full of json-juicy-goodness ©️. All we have to add is some conditionals and we'll be off to the races.

Finishing up

Before we finish up let's figure out what we will need to check for:

Something to check for a a valid zip code before the useEffect is run. The pseudocode would be if zip is 5-characters long, then run the useEffect.
Some kind of loading conditional. useState is often used for this. We'll set the useState initially to false and in the onChange handler of the form we'll set the useState to true.
Finally we have to check for errors. If the response sends back that a zip code doesn't exist, we'll let the user know in the form.

Here it is:

App.js



import React, { useEffect, useState } from "react";
import "./App.css";

const xml2json = (srcDOM) => {
  let children = [...srcDOM.children];
  // base case for recursion.
  if (!children.length) {
    return srcDOM.innerHTML;
  }
  // initializing object to be returned.
  let jsonResult = {};
  for (let child of children) {
    // checking is child has siblings of same name.
    let childIsArray =
      children.filter((eachChild) => eachChild.nodeName === child.nodeName)
        .length > 1;
    // if child is array, save the values as array, 
    // else as strings.
    if (childIsArray) {
      if (jsonResult[child.nodeName] === undefined) {
        jsonResult[child.nodeName] = [xml2json(child)];
      } else {
        jsonResult[child.nodeName].push(xml2json(child));
      }
    } else {
      jsonResult[child.nodeName] = xml2json(child);
    }
  }
  return jsonResult;
};

function App() {
  const parser = new DOMParser();

  const initialCityState = { city: "", state: "" };
  // eslint-disable-next-line
  const [cityState, setCityState] = useState(initialCityState);
  const [zipcode, setZipcode] = useState("");
  const [loading, setLoading] = useState(false);

  // We check to see if the input is 5 characters long and there
  // is something there
  const isZipValid = zipcode.length === 5 && zipcode;

  useEffect(() => {
    const fetchCityState = async () => {
      try {
        // If zip is valid then...fetch something
        if (isZipValid) {
          const response = await fetch(
            `/.netlify/functions/getCityState?&zipcode=${zipcode}`,
            {
              headers: { accept: "application/json" },
            }
          );
          const data = await response.text();
          const srcDOM = parser.parseFromString(data, "application/xml");
          console.log(xml2json(srcDOM));
          const res = xml2json(srcDOM);

          // Using optional chaining we check that all the DOM
          // items are there
          if (res?.CityStateLookupResponse?.ZipCode?.City) {
            // set loading to false because we have a result
            setLoading(false);
            // then spread the result to the setCityState hook
            setCityState({
              ...cityState,
              city: res.CityStateLookupResponse.ZipCode.City,
              state: res.CityStateLookupResponse.ZipCode.State,
            });

            // Error checking. User did not put in a valid zipcode
            // according to the API
          } else if (res?.CityStateLookupResponse?.ZipCode?.Error) {
            setLoading(false);
            // then spread the error to the setCityState hook
            setCityState({
              ...cityState,
              city: `Invalid Zip Code for ${zipcode}`,
              state: "Try Again",
            });
          }
        }
      } catch (e) {
        console.log(e);
      }
    };

    fetchCityState();
  }, [zipcode]);

  return (
    <div className="App">
      <h1>City/State Lookup Tool</h1>
      <form action="" className="form-data">
        <label htmlFor="zip">Type Zip Code Here</label>
        <input
          maxLength="5"
          className="zip"
          value={zipcode || ""}
          placeholder="XXXXX"
          type="text"
          name="zip"
          id="zip"
          onChange={(event) => {
            const { value } = event.target;
            // Set the loading to true so we show some sort of
            // progress
            setLoading(true);
            setCityState(initialCityState);
            setZipcode(value.replace(/[^\d{5}]$/, "").substr(0, 5));
          }}
        />
        <label htmlFor="city">City</label>
        <div className="input-container">
          <input
            className={`city`}
            value={cityState.city}
            type="text"
            name="city"
            disabled
            id="city"
          />
          <div className="icon-container">
            <i className={`${loading && isZipValid ? "loader" : ""}`}></i>
          </div>
        </div>
        <label htmlFor="state">State</label>
        <div className="input-container">
          <input
            className={`state`}
            value={cityState.state}
            type="text"
            name="state"
            disabled
            id="state"
          />
          <div className="icon-container">
            <i className={`${loading && isZipValid ? "loader" : ""}`}></i>
          </div>
        </div>
      </form>
      <pre>
        <code>
          {JSON.stringify({
            zipcode: zipcode,
            city: cityState.city,
            state: cityState.state,
          })}
        </code>
      </pre>
    </div>
  );
}

export default App;

And that's it! Run netlify dev and see your hard work payoff:

Conclusion

Throughout this comprehensive tutorial we covered a lot! Firstly, we set up a form using the useState hook and also normalized our zip code input. Next was writing and tying serverless function to Netlify, and Github. Finally, we parsed to response from the USPS which was sent in XML to something easier to display. All of this contributed to increasing the UX.

Vets Who Code

Did you like what you read? Want to see more? Let me know what you think about this tutorial in the comments below. As always, a donation to Vets Who Code goes to helping veteran, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode Thanks for your time!

How to normalize an input (Colloquially known as how to create an input mask)

Steve Clark 🤷‍♀️ — Mon, 14 Sep 2020 18:44:20 +0000

Motivation
Prerequisites
Setup
Project
Wrap it up
Vet's Who Code

Motivation

Being part of the Vets Who Code organization, part of our training is helping to maintain the website. We train vets in the whole process, from HTML, CSS, JavaScript, JAMStack, ReactJS, GatsbyJS, JestJS testing, and a mess of other technologies. One of the "tickets" for the website was to format the phone field in a contact form so when the user types in their number it will automatically, as they type, format the phone from 1111111111 to 111-111-1111. This tutorial is what I took away from it.

An input mask is a way of formatting data to a standard form. For instance, in the US a zip code is five numbers. When a user types in a form on a website and it POSTs to your database you want the info preformatted for your use, plus you want to make it easier for the user to type in the information.

You can help people enter data correctly into by providing input masks for fields that contain data that is always formatted a certain way. For example, you can use an input mask to make sure that people enter correctly formatted phone numbers into a phone number field.

In this article I am going to show you some tricks to create an input mask in React.

Prerequisites

A basic understanding of HTML, CSS, and JavaScript are needed for this tutorial. Also your favorite code editor (I'm using VS Code) I will do my best to show everything else.

Setup

Start with creating a new React App. In your command line type:

npx create-react-app input-mask-tutorial
cd input-mask-tutorial
npm start or yarn start

Delete the boilerplate that comes pre-loaded with a React App like everything between the <div className="App"> and the App.css file. Download a new one here. It'll make it easier because we won't have to spend time styling the form.

Go ahead and create a form with three inputs, a button, and somewhere to display our 'output':

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form className="testform">
        <input type="text" placeholder="First name" name="firstName" />
        <input type="text" placeholder="Last name" name="lastName" />
        <input type="tel" placeholder="Telephone" name="phone" />
        <input type="reset" value="Reset" />
      </form>
      <h2>Form Submitted Data</h2>
      <pre>
        <code>{JSON.stringify(form)}</code>
      </pre>
    </div>
  );
}
export default App;

Project

Now we can add some action to these input fields.

Import useState.
Add an initialState.
Add a form state. This allows us to update the state with new values that are typed in the form.
Add a way to reset the form.
Add a way to "set" the values in the form.

import React, { useState } from "react";
import "./App.css";

function App() {
  const initialState = {
    firstName: "",
    lastName: "",
    phone: "",
  };
  const [form, setForm] = useState(initialState);

  const reset = (event) => {
    event.preventDefault();
    setForm({ ...form, ...initialState });
  };

  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form onReset={reset} className="testform">
        <input
          type="text"
          placeholder="First name"
          name="firstName"
          value={form.firstName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, firstName: value });
          }}
        />
        <input
          type="text"
          placeholder="Last name"
          name="lastName"
          value={form.lastName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, lastName: value });
          }}
        />
        <input
          type="tel"
          placeholder="Telephone"
          name="phone"
          value={form.phone}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, phone: value });
          }}
        />
        <input type="reset" value="Reset" />
      </form>
    </div>
  );
}
export default App;

With the addition of the App.css that you copied it should look something like this:

As it stands right now, our form can accept input values but there is no client-side input validation nor are there input masks to format the fields like we want to. We basically have a form we can type whatever we want into it and reset the form.

Upper Case Mask

For the first name let's go ahead and make the entry all upper case. This is a common input mask and one of the easier ones to accomplish. We are just going to upper case as the user type.

<input
  type="text"
  placeholder="First name"
  name="firstName"
  value={form.firstName}
  onChange={(event) => {
    const { value } = event.target;
    setForm({
      ...form,
      firstName: value.replace(/[^A-Za-z]/gi, "").toUpperCase(),
    });
  }}
/>

Let's see how this works. First we destructure the value from event.target.value. Then we set the state of the form by adding the first name to it. The value.replace() will take what value, as we type, and perform an input validation on it. The String.prototype.replace() method does exactly like it sounds: it will replace whatever you want with something else. For example, we can easily replace every occurrence of the word "Navy" with "Rubber Ducky Patrol". In this case we are using a regular expression to check for the occurrence of anything that is not an English letter. The toUpperCase() will then take whatever is a letter and uppercase it. Easy.

Upper case first letter

For the last name we are going to only uppercase the first letter. Sort of a formal way of writing someones name. So steve will turn into Steve.

<input
  type="text"
  placeholder="Last name"
  name="lastName"
  value={form.lastName}
  onChange={(event) => {
    const { value } = event.target;
    setForm({
      ...form,
      lastName:
        value
          .replace(/[^A-Za-z]/gi, "")
          .charAt(0)
          .toUpperCase() + value.slice(1),
    });
  }}
/>

Again we have an onChange event in the input. We destructure the value from event.target.value. Then we set the last name using the String.prototype.replace() method, scrubbing the string for anything that is not a letter. Then we use String.prototype.charAt() method to find the first letter (zero indexed) uppercase it, then add the rest of the string to the end.

Phone number input mask

Our last input mask is a little tricky. We want an input that looks like this: (XXX) XXX-XXXX as we type. If a user types 3-digits it should look like this (123). When they type 7-digits it will look something like this (123) 456. Then when they type in all 10-digits it will look something like this (123) 456-7890. We can easily use the String.prototype.replace() method but it won't do it as we type. 🤔
Let's go ahead and move the logic out of the App component and take a real close look what we need to do.
We can mask the input based on the previous value, adding digits and required punctuation as we type by comparing string lengths.

Here's a list of things we should do:

First we check if there is even a value. Else it will return undefined.
Next we only allow digits 1-9. We do this by using the String.prototype.replace() method.
Check that the length of input value is greater than the previous value. Since the previous value is going to be the initial value of phone number, and is an empty string, that's what we are comparing to.
Now the magic. If the length of the value we are typing equals 3 then we add a parentheses to the each side (123). We accomplish by using a Template literal. Template literals are string literals allowing embedded expressions.
If the length is 6 then do this (123) 456
Finally return the whole completed string with the parentheses and the hyphen.

Here's the function described above:

const normalizePhone = (value, previousValue) => {
  // Any value at all?
  if (!value) return value;
  // replace method to only allow digits 1-9
  const nums = value.replace(/[^\d]/g, ""); // only allows 0-9
  // If the length of value is greater than nothing
  if (!previousValue || value.length > previousValue.length) {
    // Is the length = 3? If true, add a parentheses to each side (123)
    if (nums.length === 3) return `(${nums})`;
    // Is the length = 6? If true, add a parentheses to each side (123)
    // and add the other three numbers
    if (nums.length === 6) return `(${nums.slice(0, 3)}) ${nums.slice(3)}`;
    // These next two statements cover everything in between all numbers being equal
    if (nums.length <= 3) return nums;
    if (nums.length <= 6) return `(${nums.slice(0, 3)}) ${nums.slice(3)}-`;
    // Finally add add a parentheses to each side (123)
    // Add the next three numbers
    // Add a hyphen and the last 4 numbers
    return `(${nums.slice(0, 3)}) ${nums.slice(3, 6)}-${nums.slice(6, 10)}`;
  }
};

Let's put it to work in the input field.

<input
  type="tel"
  placeholder="Telephone"
  name="phone"
  value={form.phone}
  onChange={(event) => {
    const { value } = event.target;
    const phoneMask = normalizePhone(value, initialFormState.phone);
    setForm({
      ...form,
      phone: phoneMask,
    });
  }}
/>

It took a little more work but check it out:

Easy, right?

Wrapping it up

In this lesson we covered a couple ways to create an input mask for an input, as a user types. It is just reusing the String.prototype.replace() method, a few regular expressions, and some clever logic. Input masks are great for good UX/UI design and are helpful for when you want to POST to your database. I hope you enjoyed the tutorial. Leave a comment down below.

Here's all the code:

import React, { useState } from "react";
import "./App.css";

const normalizePhone = (value, previousValue) => {
  if (!value) return value;
  const nums = value.replace(/[^\d]/g, ""); // only allows 0-9

  if (!previousValue || value.length > previousValue.length) {
    if (nums.length === 3) return `(${nums})`;
    if (nums.length === 6) return `(${nums.slice(0, 3)}) ${nums.slice(3)}`;

    if (nums.length <= 3) return nums;
    if (nums.length <= 6) return `(${nums.slice(0, 3)}) ${nums.slice(3)}`;

    return `(${nums.slice(0, 3)}) ${nums.slice(3, 6)}-${nums.slice(6, 10)}`;
  }
};

function App() {
  const initialFormState = {
    firstName: "",
    lastName: "",
    phone: "",
  };

  const [form, setForm] = useState(initialFormState);

  const reset = (event) => {
    event.preventDefault();
    setForm({ ...form, ...initialFormState });
  };

  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form onReset={reset} className="testform">
        <input
          type="text"
          placeholder="First name"
          name="firstName"
          value={form.firstName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({
              ...form,
              firstName: value.replace(/[^A-Za-z]/gi, "").toUpperCase(),
            });
          }}
        />
        <input
          type="text"
          placeholder="Last name"
          name="lastName"
          value={form.lastName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({
              ...form,
              lastName:
                value
                  .replace(/[^A-Za-z]/gi, "")
                  .charAt(0)
                  .toUpperCase() + value.slice(1),
            });
          }}
        />
        <input
          type="tel"
          placeholder="Telephone"
          name="phone"
          value={form.phone}
          onChange={(event) => {
            const { value } = event.target;
            setForm({
              ...form,
              phone: normalizePhone(value, initialFormState.phone),
            });
          }}
        />
        <input type="reset" value="Reset" />
      </form>
      <h2>Form Submitted Data</h2>
      <pre>
        <code>{JSON.stringify(form)}</code>
      </pre>
    </div>
  );
}

export default App;

CodeSandBox

Live

http://inputmasktut.surge.sh/

Vets Who Code

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below.
As always, a donation to Vets Who Code goes to helping veteran, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode
Thanks for your time!

JavaScript Primitives

Steve Clark 🤷‍♀️ — Mon, 22 Jun 2020 14:07:31 +0000

Variables

The values a program stores in computer memory are called variables. Data stored in a specific variable often changes. A variable is similar to a storage area—a program can put any value into it and then retrieve the value later for use. To use a variable first write a statement that creates it and then assign it a name. For example, an application may have a variable named currentTime and then stores the current time in that variable. Each time the application runs, the current time is different; therefore, the value varies. Another example, is an eCommerce program that might include variables that stores customer's names and purchase totals. Each variable will contain different values at different times depending on the name of the customer, the items that customer is purchasing, or the cost of the product.

There are rules to follow when assigning a variable name. There are also a general agreement about basic principles or procedures (naming conventions) that are followed in JavaScript.

Naming Conventions

For variable names use lowerCamelCasing, and use concise, human-readable, semantic names where appropriate.[1]

Do this ✅:

let playerScore = 0;

let speed = distance / time;

Not this ❌:

let thisIsaveryLONGVariableThatRecordsPlayerscore345654lol = 0;

let s = d / t;

When declaring variables and constants, use the let and const keywords, never var.
If a variable will not be reassigned, use const:

const myName = "Steve"; //const = constant meaning not changing

let day = "Wednesday"; //let can change. Today is Wednesday, tomorrow is Thursday

Reserved keywords

Be careful when naming variables because there is a list of keywords that can only be used by the system because they have special meaning.

Words
break	case	catch	class
const	continue	debugger	default
delete	do	else	export
extends	finally	for	function
if	import	in	instanceof
new	return	super	switch
this	throw	try	typeof
var	void	while	with
yield

Data Types

Variables can contain many different kinds of values—for example, the time of day, a dollar amount, or a person’s name. A data type is the specific category of information that a variable contains. The concept of data types is often difficult for new programmers to understand; in real life people don’t often distinguish among different types of information. If someone asks someone for their name, age, or the current time, they don’t usually think that name is a string or that their age or time are numbers. In JavaScript, a variable’s data type is important because the it determines how much memory the computer allocates for the data stored in the variable. The data type also governs the kinds of operations that can be performed on a variable.

Primitives

A primitive is data that is not an object and has no methods. There are six primitive data types: string, number, bigint, boolean, undefined, and symbol. There also is null, which is seemingly primitive, but is a special case [2].
All primitives are immutable, meaning, they cannot be changed. For example, the string let name = "Vets Who Code" can be either return a new string or can be reassigned.

//Immutable. Return a new string
let name = "Vets Who Code";
let newName = name.replace("V", "v");
console.log(newName);
//"vets who code"

//Will not work:
let name = "Vets Who Code";
let name = name.replace("V", "v");
console.log(name);
//SyntaxError: Identifier 'name' has already been declared

//Not immutable example:
let name = "Vets Who Code";
name.toUpperCase();
console.log(name);
//"Vets Who Code"
// name variable was not mutated

//Reassigning a string
let name = "Vets Who Code";
name = "VWC";
console.log(name);
// "VWC"

Strings

Strings represent values that hold text like sentences or words.

Word
let word = "warrior";

Sentence
let sentence = "Some people spend an entire lifetime wondering if they made a difference in the world. The Marines don't have that problem."

Strings only have one property: length.

Strings have many many methods. They can be changed from lower case to uppercase, made bold, concatenated, replaced, iterated over and a plethora of other methods. They all can be found here.

Numbers

Numbers are numeric data type — numbers between -2⁵³ − 1 and 2⁵³ − 1. That's a pretty big number. Open up a browser then the console. In the console type console.log(Number.MAX_SAFE_INTEGER). What number was it? It's pretty big! Anything larger than that you would want to use BigInt to represent your number.

Numbers can be written like this:

let number = 5;
let age = 40;
const year = 2020;
let distance = 50;

BigInt

BigInt is a built-in object that provides a way to represent whole numbers larger than 2⁵³ - 1 or numbers smaller than -(2⁵³-1), which are the largest and smallest numbers JavaScript can reliably represent with the Number primitive.

There is a limitation on largest possible integer because of how JavaScript represents number internally. It uses a 64-bit double-precision floating point number. Why can Number only represent 53-1 bits as opposed to 64 bits, as one would imagine? It is because 1 bit is reserved for the sign and the rest are reserved for the exponent.

A BigInt is created by appending n to the end of an number or by calling the constructor BigInt(number here).

let bigNum = 100n;
let anotherBigNum = BigInt(200);

Here's an example of why BigInt is used:

const maxInteger = Number.MAX_SAFE_INTEGER;

console.log(maxInteger + 1); //9007199254740992
console.log(maxInteger + 2); //9007199254740992 ??
console.log(maxInteger + 3); //9007199254740994

const maxIntegerBigInt = BigInt(maxInteger);

console.info(maxIntegerBigInt); // 9007199254740991n
console.info(maxIntegerBigInt + 1n); // 9007199254740992n
console.info(maxIntegerBigInt + 2n); // 9007199254740993n
console.info(maxIntegerBigInt + 3n); // 9007199254740994n

With BigInt we can reliably calculate the larger numbers.

Something to think about

Open your browser then go to the console. Type:
0.1 + 0.2;
What was the result? Why?

Boolean

Boolean is a data type that has only two values: true or false. Think of a Boolean value as being yes or no or on or off. Boolean values are most often used for deciding which code should execute and for comparing data. In JavaScript, only use the words true and false to indicate Boolean values.

let isLightBulbOn = true; // 💡;

Exercise

Which one of these will evaluate to true?
2 == "2";
2 === "2";

Undefined

A variable that has not been assigned a value has the value undefined. Undefined has no properties or methods, meaning you cannot execute anything against it.

let x;
console.log(x) //undefined
console.log(type of x) //undefined

Symbols

The latest version of JavaScript introduced Symbols. Symbols are tokens that serve as unique IDs and are created using the function Symbol(). You can also give your Symbol an optional string description like this: Symbol("mySymbol"). The thing about symbols is that each one that is created is unique so that:

const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2); //false

Symbols can be used as property keys:

const KEY = Symbol(); // create new Symbol
let object = {}; // create empty object
object[KEY] = "lol"; // add Symbol to object
console.log(object[KEY]); // "lol"
console.log(object); // {Symbol(): "lol"}

There is much more to Symbols that can be read here.

Review Questions

Which is a primitive data type?
1. Boolean.
2. Integer.
3. Floating Point
4. Object.
How is a BigInt created?
1. Appending b to the end of a number.
2. Preceding a number with big.
3. Appending n to the end of a number.
4. JavaScript will automatically parse large numbers.
Which word below is a reserved keyword?
1. switch.
2. pop.
3. not.
4. lol.

In this lesson you have learned about the primitive JavaScript data types including undefined, null, number, BigInt, string, boolean, and symbol.

Vets Who Code

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below. As always, a donation to Vets Who Code goes to helping veterans, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode or go here to buy some Vets Who Code swag.

Thank you for your time!

How to Fork a Repo and get a free Vets Who Code sticker

Steve Clark 🤷‍♀️ — Sun, 17 May 2020 18:12:48 +0000

Introduction

In Vets Who Code we have a pretty solid curriculum where we teach from the basics to the more advanced. Week 1 of training involves the command line, VS Code, Markdown, and Git. This tutorial is on the basics of Git. Last time I explained to you about creating a repo, clone a repo, creating a new branch, adding, committing, pushing changes, and making a pull request. You can read about that here:

git

Steve Clark 🤷‍♀️ ・ May 6 ・ 7 min read

#github #git #beginners #tutorial

This article I am going to explain forking a repo, making changes, and doing a pull request. The reward for completing this tutorial is a free Vets Who Code sticker 🙌 The same ones here. Act fast! We only have 25 to give away!

Introduction
Table of Contents
Requirements
Fork a Repo
Instructions
Wrapping it up
Vets Who Code

Requirements

Node JS 8 or later installed locally.
VS Code or another code editor.
npm — npm is distributed with Node.js - which means that when you download Node.js, you automatically get npm installed on your computer.
A Github account.

Fork a Repo

A fork is a copy of a repository. Forking a repo allows someone to freely make changes to their own copy of a program without affecting the old repo. You can pretty much fork any open source project on Github. There are several reasons to fork a repo:

You are working on a program and you come across a bug in it. If the repo is available, you can fork it to propose changes related to fixing a bug instead of submitting a bug report.
You can use someone elses project as a starting point for your own.

Instructions

To start go to https://github.com/gixxerblade/vwc-sticker-giveaway click fork.

Go to your page on Github. It'll be github.com/your-username and then go to the repo you just forked.

Click the green labeled Clone or download and copy the link that that starts with git@github:your-username/...

Open your code editor, open up your terminal and type git clone <the link from the previous step>

You'll see Github perform some actions in your terminal:

Next you'll cd <name of the folder you just cloned into>. cd just means change directory

Type npm install — npm install installs all the dependencies a program needs based on the package.json file and puts them in the node_modules folder in your directory.

Type git checkout -b mysticker
git checkout -b something-here creates a new branch as we discussed in the previous tutorial.

Type npm run address and follow the prompts. Please make sure to enter your address carefully (so I know where to send the sticker to!)

Copy the encrypted address to a new file in /stickers/<your-github-username>.txt

Type git add . && git commit -m <your-message>

Type git push origin mysticker

When you're done, your terminal should look similar to this:

Open new pull request on Github like we went through in the last lesson.

Wait a few weeks for your sticker.

Wrapping it up

You just learned how to fork a repo. I hope you enjoyed this tutorial. If you did please give me a ❤️. I like doing these tutorials beacuse they reinforce stuff that I have learned (and continue to learn).

Vets Who Code

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below.
As always, a donation to Vets Who Code goes to helping veterans, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode or go here to buy some Vets Who Code swag
Thank you for your time!

git

Steve Clark 🤷‍♀️ — Wed, 06 May 2020 15:00:01 +0000

Introduction

Git is a distributed version control and collaboration system that tracks changes in code during development. It hosts repositories of your code so that you can see what changes you have made and allows you to go back to a previous version. It also allows you to share code to allow collaboration on projects. In this tutorial we are going to be talking about Github, one of the more ubiquitous repository hosting systems.

Requirements

A Github account
A code editor. I recommend VS Code. VS Code is VWCs primary text editor. Download it here and play around with it to become familiar since you will spend many hours in this environment. This tutorial is using VS Code.

Create a Repository
Clone Your Repo Locally
Create a New Branch
Make, Add, Commit, and Push Changes
Making a Pull Request
Wrapping it up
Vets Who Code

Create a Repository

When I am starting a new project, one of my first steps is creating a repository (repo) to organize my project.

To create a repo, go to your Github account and click "Repositories". It is the second tab on the top of the page next to your profile image.

Click the green button labeled New.

Then fill out the Repository name, Description, make sure Public is checked, Initialize this repository with a README is checked, then Create repository

You just created your first repo! 🤙

Clone Your Repo Locally

In the previous section we created a repo which is a good start. Next we want to make a local copy on our computer so that we can make changes to it.

In your newly created Github repo click the green button labeled Clone or download.
Copy the link. It looks like git@github.com:your_username/your_repo_name.git
Open up VS Code
In the menu go to View => Terminal to open a new command line. (Or CTRL + ` in Windows)
Type git clone <your repo you just copied> then Enter. Your result should look like this:

Then change directory to that newly created directory you created by typing cd <name of your repo>

Create a New Branch

Recently, I was working on the Vets Who Code website when we talked about adding a blog to it. There are some very talented veterans on our team that are very capable of creating a blog very easily but I also wanted to try my hand out on it. Instead of writing to the original code base, I "branched" off my own code base and began writing my own version of the blog for our site. When I was done I sent my branch to the kind people at Vets Who Code by making a pull request. Don't worry, we'll talk about pull requests later.

As you can see from the image above, I made a new branch off of the original code so I had a fresh copy of the updated code. That way I could work on the a version of the repo without messing up the original repo.

When you clone a repo, you are cloning the master branch. For good practice, I was always taught to never work on the master branch but always work on another branch. The master branch should represent the 'stable' version of your code. Use branches to experiment with new features (like a blog in the example above), implement them, and when they are stable, you can merge them back to the master branch.

Open up VS Code again.
Open a terminal and then type cd <name of your repo>
Type git checkout -b <name-of-your-new-branch>
Type git branch. You should be left with this:

You're doing great! You've just created a new branch you can work on, independent of the master branch.

Make, Add, Commit, and Push Changes

In the last section we created a new branch. Now we want to make changes to this branch, then add these changes to our working tree, commit those changes to our files, then push those changes to our online Github branch. Here's how we're going to do it:

In your terminal, type code README.md. This will open the editor portion for you to edit in VS Code.
Add a comment to your README.md.

As you can see we added one single line of text. VS Code is already tracking this change. See that green line next to your text? That's telling you that you've made changes to the document. It shows that we've changed two lines (denoted with the + sign); we've added the text and we've added one empty line.

Go back to your terminal and type git add README.md. Again, we adding this file to our working tree of changed items.
Type git commit -m "Added one line of text to README.md". The commit command stages all the files you added. The -m flag followed by quoted text is a short synopsis of those changes.
Type git status

As you can see we received several messages from these two commands. First, the message shows us we are on the develop branch with a unique serial number. Then it shows that we changed one file (README.md) and made two insertions: the one line of text and the one empty line when we hit return. That unique number is just a portion of a longer number.

Type git log

From the git log we can see the full history of commits we have made on this one repository which is helpful if you are running into merge problems down the road. It also shows the entire unique commit number, in this case 9c2e9abe44d48b9be159fc244758251545161786.

Type git push. Uh-oh, we seem to have a fatal error. Git is smart and helps us find a solution to the error.

Type git push --set-upstream origin develop-branch.

What we just did is change our remote origin from master to develop-branch. If you go to https://www.github.com/your-username/your-repo ~~you will see that it is now updated online and it reflects the changes you made locally, on your computer.~~ No it isn't updated. What is going on? Let's find out in the next section.

Making a Pull Request

A pull request is a request to merge a branch that is not the master branch. A recap, earlier we created a new branch named develop-branch so we could make changes to a document independent of the original work or master copy of the document. Now we are going to merge these changes with the original work:

Go to www.github.com/your-username/your-repo and click on New pull request button.

On the next page, right below the Compare changes heading where it says base: master <== compare:master, select the compare:master dropdown and select develop-branch.

What we are doing is comparing the develop-branch to the master branch and to let Github see what changes were made.

As you can see, we are able to merge these two branches/documents together without any weird behavior.

Click the green button labeled Create pull request and see the results.

This branch has no conflicts with the base branch
Merging can be performed automatically.

Finally, click the Merge pull request button then the Confirm merge.

✅ Success!

Two things here. You can either delete the develop-branch here or keep it. I recommend keeping it, only because it can be a regularly used branch to make small changes to a project. If it was a branch named feature/add-blog you could safely delete it because once a feature is merged to the main code base, you won't be using it anymore, just creating new branches to fix bugs. At any rate, you can see your work if you go back to the main page of your repo:

Congratulations, you finished, now go out and build and conquer your world.

Do you want a real world test of your newly acquired skills? Wait for part two of this tutorial where we learn how to fork a project, make changes, then make a pull request. You also get a free sticker for your efforts.

Wrapping it up

Vets Who Code

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below.
As always, a donation to Vets Who Code goes to helping veterans, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode
Thank you for your time!

React Tutorial — Upload and Fetch Photos with Cloudinary

Steve Clark 🤷‍♀️ — Tue, 10 Mar 2020 15:14:23 +0000

As part of the Vets Who Code organization we give each other small coding challenges to help us stay frosty. One recent challenge was to "Create a form that takes a picture, a name, and description and make a little profile card from the upload."

Challenge Accepted

Being an unemployed veteran of the Marine Corps, it leaves me with a lot of time to try and make things more interesting for myself, so I thought "What if I did the challenge, but using React?" As developers, we have to be comfortable with making forms of all types. This includes image upload. That's why I thought this challenge was interesting.

Here's what we will be making:

Link to live version

Goal

I like to put my thoughts into words. This tutorial is just as much for me as it is for other newer developers that have questions that you can't easily find. Also, forms. Forms are used all over the web to collect information. This tutorial will help make use of good form design.

React Tutorial — Upload and Fetch Photos with Cloudinary
- Challenge Accepted
- Goal
- Table of Contents
- Prerequisites
- Cloudinary
- Other Libraries/Frameworks
- Set Up
- Cloudinary Set Up
- React Set Up
  - App.js
  - App.css
  - MediaCard.jsx
  - Form.jsx
- Functionality
- Wrapping it up
- Vets Who Code

Prerequisites

A basic understanding of HTML, CSS, and JavaScript are needed for this tutorial. Also your favorite code editor (I'm using VS Code) I will do my best to show everything else.

Cloudinary

Along the way I discovered a neat little website named Cloudinary. It's a service that can store, manipulate, manage, and serve images. I chose to use Cloudinary because it has a free tier that includes all the features needed to make this project work. For this tutorial, all you need is a free account.

Other Libraries/Frameworks

Material-UI - for design
SuperAgent - for ajax
react-dropzone - handle the image upload

Set Up

Cloudinary Set Up

Get a free account at Cloudinary.
Once you have an account, navigate to Setting > Upload.
It took me a sec to find the Settings. It's in the top-right corner and looks like a little blue gear ⚙️. Then click the Uploads tab.

Select Add Upload Preset under Upload presets.

On the Add Upload Presets page name your Upload Preset Name, it doesn't matter what it is; you can name it rigmarole if you want to. Also set the Signing Mode to Unsigned.

React Set Up

Let's start with creating a new React App.

npx create-react-app profile-card
cd profile-card

Install the dependencies we will need and start our local server:

npm install @material-ui/core material-ui-dropzone superagent --save
npm start

Go ahead and delete the boilerplate that comes preloaded with a React App like everything between the <div className="App"> and add a new folder named components within the src folder. Create two files within the components folder named MediaCard.jsx and Form.jsx. These are the two files we will mostly be working with.

App.js

Initially, App.js should look like this:

import React from "react";
import "./App.css";
import MediaCard from "./components/MediaCard";
import Form from "./components/Form";

function App() {
  return (
    <div className="App">
      <h1 className="title">Make Your Own Profile Card</h1>
      <div className="container">
        <MediaCard />
        <Form />
      </div>
    </div>
  );
}

export default App;

App.css

A little itsy-bitsy CSS setup is required to align everything overall. You can style it how you want but I used flexbox to adjust everything:

App.css

.App {
  text-align: center;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
}
.container {
  width: 55%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
}

For the MediaCard.jsx and the Form.jsx since we are setting up something to display and a form I used Material-UI. They have many pre-built components that implement Google's Material Design making design that much easier.

MediaCard.jsx

For the MediaCard.jsx display I used a card component. There are many pre-built ones to choose from and I thought this one would work for this small challenge. I went ahead and stripped the buttons from it since we won't need them, unless you want to include them.

Here it is:

MediaCard.jsx

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";

const styles = {
  /*
  Make adjustments for the card width. It is styled using traditional CSS.
  */
  card: {
    width: 300,
    marginBottom: 10
  },
  /*
  Make adjustments for the media so it properly appears on the profile card.
   */
  media: {
    height: 400
  }
};
const MediaCard = { classes } => {
  return (
    <Card className={classes.card}>
      <CardActionArea>
        {/*
        image= URL to your image, local or URL
        title= Title of the card, for accessibility purposes.
       */}
        <CardMedia
          className={classes.media}
          image="https://www.placecage.com/300/300"
          title="Nicolas Cage"
        />
        <CardContent>
          {/*Title of the profile card */}
          <Typography gutterBottom variant="h5" component="h2">
            Nicholas Cage
          </Typography>
          {/* This is where the description will go. I used [Hipster Ipsum](https://hipsum.co/)
          for this example.
          */}
          <Typography component="p">
            I'm baby tousled cold-pressed marfa, flexitarian street art bicycle
            rights skateboard blue bottle put a bird on it seitan etsy
            distillery. Offal tattooed meditation hammock normcore migas tbh
            fashion axe godard kogi beard knausgaard.
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};
MediaCard.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MediaCard);

Form.jsx

Material-UI forms use a TextField wrapper. I decided to combine a few of these text fields along with the DropZone component to create the form. Standard form attributes are supported e.g. required, disabled, type, etc. as well as a helperText which is used to give context about a field’s input, such as how the input will be used. It is wrapped in the the Material-UI Grid component to make it responsive. Examples can be found here. There are a wide range of inputs that can be selected to create your form. Go ahead and make it your own. This is what I used:

Form.jsx

import React from "react";
import TextField from "@material-ui/core/TextField";
import { DropzoneArea } from "material-ui-dropzone";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import request from "superagent";

/*
useStyles is a custom hook from Material-UI.
*/
const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  },
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: 300
    }
  }
}));
const Form = () => {
  const classes = useStyles();

  return (
    <form className={classes.root}>
      <Grid container direction="column" justify="center" alignItems="center">
        <h2 className="addImage">Add Image</h2>
        {/*
        I added a few DropZone and TextField attributes, For DropZone we limit the size,
        limit to images only and a few other self-explanatory items. For the TextField
        we use a standard format to display a well-formatted input.
        Also added an onChange handler pointing to a function we are going
        to create soon.
        */}
        <DropzoneArea
          showFileNamesInPreview={true}
          maxFileSize={10000000}
          multiple="false"
          accept="image/*"
          onDrop={console.log}
          dropzoneText="Add an image here"
          type="file"
          onChange={onImageDrop}
        ></DropzoneArea>
        <h2>Add your Name</h2>
        <TextField
          className={classes.root}
          id="outlined-basic"
          label="Your Name"
          variant="outlined"
          autoFocus
          type="text"
          name="name"
          autoComplete="false"
          onChange={handleChange}
        />
        <h2>Add a Description</h2>
        <TextField
          type="text"
          className={classes.root}
          id="outlined-basic"
          label="Description"
          variant="outlined"
          rows="4"
          multiline
          name="description"
          onChange={handleChange}
        />
        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.button}
        >
          Save
        </Button>
      </Grid>
    </form>
  );
};
export default Form;

That does it for setup. We've added a lot of boilerplate up to this point but it will pay off when we start making everything dynamic. With Hot Module Reloading (HMR) you should see something like this:

Functionality

To make our application dynamic we have to introduce some state to it. The concept of state in React is that it is a plain JavaScript object that can change. For instance the current state of our app shows an image of Nick Cage along with an <h1> of "Nicolas Cage" and some paragraph text. When we fill out our form the state should change to reflect what we entered, i.e., state change. If you want an app to do anything, like create, read, update, or delete you'll have to introduce state management to it. That, is the nuts and bolts 🔩 of state in React. To change the state in our app we are going to use a useState() hook with it. I like useState() better than classes for several reasons: One, the code is shorter; there is no constructor or binding functions to components for its methods to have access to this in the component instance. Two, I think it is simpler to understand. Finally, it is how I was taught in Vets Who Code.

Back to coding... 😄

In our App.js add the following:

App.js

//add { useState} to our import.
import React, { useState } from "react";

function App() {
//Add a state to track the URL of the image we add.
const [uploadedFileUrl, setUploadedFileUrl] = useState({ uploadedFiles: null });

//Add a state to track the data entered in to our form.
  const [formData, setFormData] = useState({
    name: "",
    description: ""
  });

/*
Add a state to trigger our change in our profile card.
This will help us create a "conditional ternary operator"
(fancy if/else statement)
 */
const [change, setChange] = useState(true);

You are probably wondering why are we adding these states to App.js. The answer is simple. It is the center of gravity for both our components. App.js is the common denominator of MediaCard.jsx and Form.jsx so to share states between the two components we send them through App.js.

If you were to console.log these states you will see two objects and a Boolean:

Let's put these state objects to use and make our form functional.

In App.js add these props to MediaCard.jsx and Form.jsx

        <MediaCard
          change={change}
          setChange={setChange}
          formData={formData}
          uploadedFileUrl={uploadedFileUrl}
        />
        <Form
          formData={formData}
          setFormData={setFormData}
          setChange={setChange}
          setUploadedFileUrl={setUploadedFileUrl}
          uploadedFileUrl={uploadedFileUrl}
        />

Open Form.jsx and import request from our superagent module we downloaded at the beginning. Then add your Cloudinary account information and the props we are passing to the Form.jsx component:

Form.jsx

//import statements
import request from "superagent";

const CLOUDINARY_UPLOAD_PRESET = "upload_preset_id";
const CLOUDINARY_UPLOAD_URL =
  "https://api.cloudinary.com/v1_1/cloudinary_app_name/upload";

const Form = ({formData, setFormData, setChange, setUploadedFileUrl, uploadedFileUrl}) =>{...
  const classes = useStyles();

  return (...)
}

In the body of Form.jsx above the return statement add:

Form.jsx

const Form = ({formData, setFormData, setChange, setUploadedFileUrl, uploadedFileUrl}) =>{...
  const classes = useStyles();
/*
onSubmit is the main function that will handle the button click.
Much like an `addEventListener` in vanilla JavaScript.
'e' is shorthand for 'event'
*/
  const onSubmit = e => {
    e.preventDefault();
    setChange(false);
    setUploadedFileUrl({ uploadedFiles: e[0] });
    /*
    I console.log here to check if the onSubmit is grabbing the image.
    */
    console.log(uploadedFileUrl.uploadedFiles);
    handleImageUpload(uploadedFileUrl.uploadedFiles);
  };
/*
handleChange changes the state of our formData state. It takes the value from the event
and uses a spread operator to update the state of nested objects.
It takes the name of the objects and spreads them through the state array.
*/
  const handleChange = e => {
    const value = e.target.value;
    setFormData({ ...formData, [e.target.name]: value });
  };
/*
According to the react-dropzone documentation, it will always return
an array of the uploaded files. We pass that array to the files
parameter of the onImageDrop function. Since we are only allowing one
image at a time we know that the image will always be in the first
position of the array ([0]).
*/
  const onImageDrop = e => {
    setUploadedFileUrl({ uploadedFiles: e[0] });
  };
/*
Here we harness the power of superagent request to upload the image to Cloudinary.
*/
  const handleImageUpload = file => {
    let upload = request
      .post(CLOUDINARY_UPLOAD_URL)
      .field("upload_preset", CLOUDINARY_UPLOAD_PRESET)
      .field("file", file);
    upload.end((err, response) => {
      if (err) {
        console.error(err);
      }
      if (response.body.secure_url !== "") {
        setUploadedFileUrl({
          uploadedFiles: response.body.secure_url
        });
      }
    });
  };

  return (...)
}

Now is where we get to see the state change. In MediaCard.jsx we are going to add the conditional ternaries to make it functional. Basically, Form.jsx is going to send information to MediaCard.jsx by way of App.js and we'll see it change.

const MediaCard = ({ classes, change, formData, uploadedFileUrl }) => {

  return (
    <Card className={classes.card}>
      <CardActionArea>
        {/*
        image= URL to your image, local or URL
        title= Title of the card, for accessibility purposes.
        This is where we use the conditional ternaries. It's a boolean
        so it checks if change is true or false. True? (default state) it
        stays the same. False? It changes to the input we sent with onSubmit.
       */}

        {change ? (
          <CardMedia
            className={classes.media}
            image="https://www.placecage.com/300/300"
            title="Profile Card"
          />
        ) : (
          <CardMedia
            className={classes.media}
            image={uploadedFileUrl.uploadedFiles}
            title="Profile Card"
          />
        )}
        <CardContent>
          {/*Title of the profile card */}
          {change ? (
            <Typography gutterBottom variant="h5" component="h2">
              Nicholas Cage
            </Typography>
          ) : (
            <Typography gutterBottom variant="h5" component="h2">
              {formData.name}
            </Typography>
          )}
          {/* This is where the description will go. I used [Hipster Ipsum](https://hipsum.co/)
          for this example. 
          */}
          {change ? (
            <Typography component="p">
              I'm baby tousled cold-pressed marfa, flexitarian street art
              bicycle rights skateboard blue bottle put a bird on it seitan etsy
              distillery. Offal tattooed meditation hammock normcore migas tbh
              fashion axe godard kogi beard knausgaard.
            </Typography>
          ) : (
            <Typography component="p">{formData.description}</Typography>
          )}
        </CardContent>
      </CardActionArea>
    </Card>
  );
};
MediaCard.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MediaCard);

If everything worked out you should see this.

Here's the whole project in case you missed something.

App.js

import React, { useState } from "react";
import "./App.css";
import MediaCard from "./components/MediaCard";
import Form from "./components/Form";

function App() {
  //Add a state to track the URL of the image we add.
  const [uploadedFileUrl, setUploadedFileUrl] = useState({
    uploadedFiles: null
  });
  console.log(uploadedFileUrl);
  //Add a state to track the data entered in to our form.
  const [formData, setFormData] = useState({
    name: "",
    description: ""
  });
  //Add a state to trigger our change in our profile card.
  const [change, setChange] = useState(true);
  return (
    <div className="App">
      <h1 className="title">Make Your Own Profile Card</h1>
      <div className="container">
        <MediaCard
          change={change}
          setChange={setChange}
          formData={formData}
          uploadedFileUrl={uploadedFileUrl}
        />
        <Form
          formData={formData}
          setFormData={setFormData}
          setChange={setChange}
          setUploadedFileUrl={setUploadedFileUrl}
          uploadedFileUrl={uploadedFileUrl}
        />
      </div>
    </div>
  );
}

export default App;

MediaCard.jsx

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";

const styles = {
  /*
  Make adjustments for the card width. It is styled using traditional CSS.
  */
  card: {
    width: 350,
    marginBottom: 10
  },
  /*
  Make adjustments for the media so it properly appears on the profile card.
   */
  media: {
    height: 400
  }
};

const MediaCard = ({ classes, change, formData, uploadedFileUrl }) => {
  //const { classes } = props;
  return (
    <Card className={classes.card}>
      <CardActionArea>
        {/*
        image= URL to your image, local or URL
        title= Title of the card, for accessibility purposes.
       */}

        {change ? (
          <CardMedia
            className={classes.media}
            image="https://www.placecage.com/300/300"
            title="Profile Card"
          />
        ) : (
          <CardMedia
            className={classes.media}
            image={uploadedFileUrl.uploadedFiles}
            title="Profile Card"
          />
        )}
        <CardContent>
          {/*Title of the profile card */}
          {change ? (
            <Typography gutterBottom variant="h5" component="h2">
              Nicholas Cage
            </Typography>
          ) : (
            <Typography gutterBottom variant="h5" component="h2">
              {formData.name}
            </Typography>
          )}
          {/* This is where the description will go. I used [Hipster Ipsum](https://hipsum.co/)
          for this example. 
          */}
          {change ? (
            <Typography component="p">
              I'm baby tousled cold-pressed marfa, flexitarian street art
              bicycle rights skateboard blue bottle put a bird on it seitan etsy
              distillery. Offal tattooed meditation hammock normcore migas tbh
              fashion axe godard kogi beard knausgaard.
            </Typography>
          ) : (
            <Typography component="p">{formData.description}</Typography>
          )}
        </CardContent>
      </CardActionArea>
    </Card>
  );
};
MediaCard.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MediaCard);

Form.jsx

import React from "react";
import TextField from "@material-ui/core/TextField";
import { DropzoneArea } from "material-ui-dropzone";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import request from "superagent";

/*
useStyles is a custom hook from Material-UI.
*/
const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  },
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: 300
    }
  }
}));
const CLOUDINARY_UPLOAD_PRESET = "upload_preset_id";
const CLOUDINARY_UPLOAD_URL =
  "https://api.cloudinary.com/v1_1/cloudinary_app_name/upload";

const Form = ({
  formData,
  setFormData,
  setChange,
  setUploadedFileUrl,
  uploadedFileUrl
}) => {
  const classes = useStyles();
  /*
onSubmit is the main function that will handle the button click.
Much like an `addEventListener` in vanilla JavaScript.
'e' is shorthand for 'event'
*/
  const onSubmit = e => {
    e.preventDefault();
    setChange(false);
    setUploadedFileUrl({ uploadedFiles: e[0] });
    console.log(uploadedFileUrl.uploadedFiles);
    handleImageUpload(uploadedFileUrl.uploadedFiles);
  };
  /*
handleChange changes the state of our formData state. It takes the value from the event
and uses a spread operator to update the state of nested objects.
It takes the name of the objects and spreads them through the state array.
*/
  const handleChange = e => {
    const value = e.target.value;
    setFormData({ ...formData, [e.target.name]: value });
  };
  /*
According to the react-dropzone documentation, it will always return
an array of the uploaded files. We pass that array to the files
parameter of the onImageDrop function. Since we are only allowing one
image at a time we know that the image will always be in the first
position of the array ([0]).
*/
  const onImageDrop = e => {
    setUploadedFileUrl({ uploadedFiles: e[0] });
  };
  /*
Here we harness the power of superagent request to upload the image to Cloudinary.
*/
  const handleImageUpload = file => {
    let upload = request
      .post(CLOUDINARY_UPLOAD_URL)
      .field("upload_preset", CLOUDINARY_UPLOAD_PRESET)
      .field("file", file);
    upload.end((err, response) => {
      if (err) {
        console.error(err);
      }
      if (response.body.secure_url !== "") {
        setUploadedFileUrl({
          uploadedFiles: response.body.secure_url
        });
      }
    });
    console.log(uploadedFileUrl.uploadedFiles);
  };

  return (
    <form className={classes.root} onSubmit={onSubmit}>
      <Grid container direction="column" justify="center" alignItems="center">
        <h2 className="addImage">Add Image</h2>
        {/*     
        I added a few DropZone attributes to limit the size, 
        limit to images only and a few other self-explanatory items.
        */}
        <DropzoneArea
          showFileNamesInPreview={true}
          maxFileSize={10000000}
          multiple="false"
          accept="image/*"
          onDrop={console.log}
          dropzoneText="Add an image here"
          type="file"
          onChange={onImageDrop}
        ></DropzoneArea>
        <h2>Add your Name</h2>
        <TextField
          className={classes.root}
          id="outlined-basic"
          label="Your Name"
          variant="outlined"
          autoFocus
          type="text"
          name="name"
          autoComplete="false"
          onChange={handleChange}
        />
        <h2>Add a Description</h2>
        <TextField
          type="text"
          className={classes.root}
          id="outlined-basic"
          label="Description"
          variant="outlined"
          rows="4"
          multiline
          name="description"
          onChange={handleChange}
        />
        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.button}
        >
          Save
        </Button>
      </Grid>
    </form>
  );
};
export default Form;

Wrapping it up

Don't worry if you're a little lost. I just wanted to fully explain the functionality of everything instead of just blasting an answer at you. I figure working things out is the best way to learn a concept. It was really a short project that I learned a tremendous amount from. I am sure there is going to be some experts coming on here telling me I could've done it better this way but as I am a n00b, I figured it out this way, and with more experience and practice I will find better ways to do things.

Vets Who Code

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below.
As always, a donation to Vets Who Code goes to helping veterans, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode
Thank you for your time!

Build a CRUD Firestore App in React/Gatsby with Hooks

Steve Clark 🤷‍♀️ — Sun, 16 Feb 2020 17:01:43 +0000

Goal

The goal of this tutorial is how to build a simple CRUD app in React to connect with Firestore.
I am breaking it down into several sections:

Build a CRUD Firestore App in React with Hooks
- Motive for Tutorial
- Goal
- Table of Contents
- Prerequisites
- Firestore
- Gatsby
- Testing Firestore
- Display Data
- Adding Data
- Deleting Data
- Edit Data
- Edit Mode
- What are we editing?
- Update Function
- Wrapping it up

Prerequisites

A basic understanding of HTML, CSS, and JavaScript are needed for this tutorial. Also your favorite code editor (I'm using VS Code) I will do my best to show everything else.

Firestore

According to Google...

Firestore is a fast, fully managed, serverless, cloud-native NoSQL document database that simplifies storing, syncing, and querying data for your mobile, web, and IoT apps at global scale.

First things first, head to https://firebase.google.com/ login, and click "Get started"
Click "Add Project", follow the steps, and then "Create Project". You should be met with a "Your new project is ready".
You should then end up on your console.

In the left-hand column click on "Database", then under Cloud Firestore click "Create Database"

Then select "Start in test mode", and click "Next", and select Cloud Firestore location. I just chose somewhere close to me. I'm on the East Coast so us-east1 is appropriate. Then click "Done". After a minute, your new Firestore database will be initialized.

Gatsby

Head over to https://www.gatsbyjs.org/docs/quick-start and complete the quick start guide:

Open up your code editor and go to the command line.
Install the Gatsby CLI with npm install -g gatsby-cli
Create a new site with gatsby new CRUD-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world
Change directory into the new site cd CRUD-tutorial
Start the development server with gatsby develop
Fire it up by going to http://localhost:8000/
This should complete the Gatsby setup.

Now we are going to start editing. In the file explorer expand your site, select src then select index.js
Since everything in the src/pages folder renders in the webpage we're going to just use the index.js file to create our CRUD app.

index.js

import React from "react"

export default () => (
  <div>
    <h1>Firestore CRUD App </h1>
    <h2>Item List</h2>
    <h2>Add Item</h2>
  </div>
)

Create a components folder within the src folder and create a couple components named itemlist.jsx and firestore.js.
Now we are going to head back to our Firebase console and add Firebase to our app to make it talk to our Firestore database. Click on your project then click on "</>" under "Get started by adding Firebase to your app".

Then "Add Firebase SDK". Copy everything in between the second <script> tags.

I edited out the API key for obvious reasons.

From the command line, stop your development server (CRTL+C on Windows) and install the firebase dependency using npm install firebase
Go back to the firebase.js file we created earlier and paste the apiKey and all other configuration information to it.

firebase.js

import firebase from "firebase/app"
import 'firebase/firestore'

var firebaseConfig = {
  apiKey: "hidden",
  authDomain: "crud-tutorial.firebaseapp.com",
  databaseURL: "https://yourfirebaseURL.firebaseio.com",
  projectId: "crud-tutorial",
  storageBucket: "hidden",
  messagingSenderId: "hidden",
  appId: "hidden",
  measurementId: "hidden",
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig)

//firebase.analytics()

export default firebase

Don't forget to import firebase from "firebase/app", import 'firebase/firestore' & export default firebase

We're going to import Firebase from this file rather than from the Firebase so we can keep using our configured version. We've also loaded all the data and all the files and all the magic that makes it so we can use the Firestore project.
Hop over to out index.js and import firebase from "./components/firebase"

Testing Firestore

Now we're going to test to see if Firestore functionality works. It's a little hacky but it'll give us a positive outcome:

index.js

import React from "react"
import firebase from "./components/firebase"

export default () => {
  firebase
    .firestore()
    .collection("items")
    .add({
      name: "Heineken",
      type: "beer",
      qty: 5,
      description:
        "Pale lager beer with 5% alcohol by volume produced by the Dutch brewing company Heineken International",
    })
    .then(ref => {
      console.log("Added document with ID: ", ref.id)
    })

  return (
    <div>
      <h1>Firestore CRUD App </h1>
      <h2>Item List</h2>
      <h2>Add Item</h2>
    </div>
  )
}

As you can see below, it worked!

As you can see I created a collection named "items" with the fields of "name", "type", "qty", & "description". Now that we know it worked we can go ahead and delete firebase.firestore()... code. It was only a proof of concept to make sure we were hooked up to Firestore.

Display Data

Now that we know we can communicate with our Firestore, we are going to display the data automagically in our browser. Head over to our itemlist.jsx and create a table. I used an HTML table generator for it to make it easy and style-able. It should look something like this:

itemlist.jsx

import React from 'react'

const ItemList = () => {
  return (
<table className="tg">
  <tbody>
    <tr>
      <th className="tg-ycr8">Name</th>
      <th className="tg-ycr8">Type</th>
      <th className="tg-i81m">Qty</th>
      <th className="tg-a02x">Description</th>
      <td class="tg-6hdc"></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td className="tg-ycr8"></td>
      <td className="tg-ycr8"></td>
      <td className="tg-i81m"></td>
      <td className="tg-ycr8"></td>
      <td class="tg-6hdc">
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>
)
}
export default ItemList

This is how we read what is in our Firestore. We are going import useState and useEffect from React as well as firebase from the firebase.js component we made earlier.

import React, { useState, useEffect } from "react"
import firebase from "./firebase"
import "../styles/global.css"

We want to pull both of them together so we'll create a custom hook. That way we abstract our API call to Firestore.

const useItems = () => {
/*
We use the useState() hook, to set initial state of our data to an empty array
*/
  const [items, setItems] = useState([])
    useEffect(() => {
    firebase
    //Accesses your Firestore database
      .firestore()
    //Access the "items" collection
      .collection("items")
    //You can "listen" to a document with the Firebase onSnapshot() method.
      .onSnapshot(snapshot => {
    /*
    The returned snapshot sends us back the id and the document data. So we map through it.
     */
        const listItems = snapshot.docs.map(doc => ({
        /*
        Map each document into snapshot
        id and data are pushed into items array
        spread operator merges data to id. What is happening is the JavaScript object is being called.
        */
             id: doc.id,
          ...doc.data(),
        }))
    //Now we set items equal to items we read from the Firestore
        setItems(listItems)
      })
      return items
    }, []) //The empty array, as a second argument, is imperative as it allows the API call to be used once. If we didn't have it it would constantly run over and over.

That's it for the custom API call. Now we can use it in our ItemList component:

itemlist.jsx

const ItemList = () => {
  /* We assign the useItem() API to a variable named listItem */
  const listItem = useItems()
  return (
    //Headings for the table.
    <table className="tg">
      <tbody>
        <tr>
          <td className="tg-ycr8">Name</td>
          <td className="tg-ycr8">Type</td>
          <td className="tg-i81m">Qty</td>
          <td className="tg-a02x">Description</td>
        </tr>
      </tbody>
      /*
      We are going to map through the data object and assign it to each row.
      */
      {listItem.map(item => (
        <tbody key={item.id}>
          <tr>
            <td className="tg-ycr8">{item.name}</td>
            <td className="tg-ycr8">{item.type}</td>
            <td className="tg-i81m">{item.qty}</td>
            <td className="tg-a02x">{item.description}</td>
          </tr>
        </tbody>
      ))}
    </table>
  )
}
export default ItemList

Here is the final result of the ItemList.

itemlist.jsx

import React, { useState, useEffect } from "react";
import firebase from "./firebase";
import "../styles/global.css";
const useItems = () => {
  const [items, setItems] = useState([]); //useState() hook, sets initial state to an empty array
  useEffect(() => {
    firebase
      .firestore() //access firestore
      .collection("items") //access "items" collection
      .onSnapshot(snapshot => {
        //You can "listen" to a document with the onSnapshot() method.
        const listItems = snapshot.docs.map(doc => ({
          //map each document into snapshot
          id: doc.id, //id and data pushed into items array
          ...doc.data() //spread operator merges data to id.
        }));
        setItems(listItems); //items is equal to listItems
      });
  }, []);
  return items;
};

const ItemList = () => {
  const listItem = useItems();
  return (
    <table className="tg">
      <tbody>
        <tr>
          <td className="tg-ycr8">Name</td>
          <td className="tg-ycr8">Type</td>
          <td className="tg-i81m">Qty</td>
          <td className="tg-a02x">Description</td>
        </tr>
      </tbody>
      {listItem.map(item => (
        <tbody key={item.id}>
          <tr>
            <td className="tg-ycr8">{item.name}</td>
            <td className="tg-ycr8">{item.type}</td>
            <td className="tg-i81m">{item.qty}</td>
            <td className="tg-a02x">{item.description}</td>
          </tr>
        </tbody>
      ))}
    </table>
  );
};
export default ItemList;

The final piece of the puzzle for reading data is something called unsubscribing. It is a very important concept when reading data because when we open a connection to Firebase we are opening an active websocket to the Firestore database. When we unsubscribe after the component is rendered we are in effect closing the connection to Firestore. Here is the code for that:

import React, { useState, useEffect } from "react"
import firebase from "./firebase"
import "../styles/global.css"
const useItems = () => {
  const [items, setItems] = useState([]) 
  useEffect(() => {
    //added variable unsubscribe
    const unsubscribe = firebase
      .firestore() 
      .collection("items") 
      .onSnapshot(snapshot => {
        const listItems = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data(),
        }))
        setItems(listItems)
      })
      //called the unsubscribe--closing connection to Firestore.
    return () => unsubscribe()
  }, [])
  return items
}

const ItemList = () => {...}
export default ItemList

Adding Data

To add data we are going to need to create a form to add data to.
Create a new .jsx file in the ./src/components folder and name it additemform.jsx

import React, { useState } from "react"
import firebase from "firebase"

const AddItemForm = () => {

  return (
    <form>
      <input name="name" type="text" />
      <input name="type" type="text" />
      <input name="qty" type="number" />
      <input name="description" type="text" />
      <button>Submit</button>
    </form>
  )
}
export default AddItemForm

Import the AddItemForm component to the index.js page.

import React from "react"
//import firebase from "./components/firebase"
import ItemList from "./components/itemlist"
>>>>>>>import AddItemForm from './components/additemform'
import "./styles/global.css"
export default () => {
  return (
    <div>
      <h1>Firestore CRUD App </h1>
      <h2>Item List</h2>
      <ItemList />
      <h2>Add Item</h2>
>>>>>><AddItemForm />
    </div>
  )
}

Go back to the additemform.jsx file and add the following:

import React, { useState } from "react"
import firebase from "firebase"

const AddItemForm = () => {
  //useState() hook captures the value from the input value
  const [name, setName] = useState("")
  const [type, setType] = useState("")
  const [qty, setQty] = useState(null)
  const [description, setDescription] = useState("")

  /* The onSubmit function we takes the 'e'
    or event and submits it to Firebase
    */
  const onSubmit = e => {
    /* 
    preventDefault is important because it
    prevents the whole page from reloading
    */
    e.preventDefault()
    firebase
      .firestore()
      .collection("items")
      .add({
        name,
        type,
        qty,
        description,
      })
      //.then will reset the form to nothing
      .then(() => setName(""), setType(""), setQty(''), setDescription(""))
  }

  return (
    <form onSubmit={onSubmit}>
      <input placeholder="Name"
        value={name}
        name="name"
        /* onChange takes the event and set it to whatever
        is currently in the input. 'e' is equal to the event
        happening. currentTarget.value is what is inputted
         */
        onChange={e => setName(e.currentTarget.value)}
        type="text"
      />
      <input placeholder="Type"
        value={type}
        name="type"
        onChange={e => setType(e.currentTarget.value)}
        type="text"
      />
      <input placeholder="Qty"
        value={qty}
        name="qty"
        onChange={e => setQty(e.currentTarget.value)}
        type="number"
      />
      <input placeholder="Description"
        value={description}
        name="description"
        onChange={e => setDescription(e.currentTarget.value)}
        type="text"
      />
      <button>Submit</button>
    </form>
  )
}
export default AddItemForm

Let's see if it works:

It does!

Deleting Data

The third piece of the puzzle with CRUD is deleting data. In one of our previous components, I mentioned that that Edit and Delete buttons were not going to work yet. We're going to attach the Delete button so it'll now remove items from your firestore with a click. To delete a document item, use the delete() method. Open the file itemlist.jsx and add the following below the useItems function:

itemlist.jsx

const deleteStorage = (id) => {
    firebase
      .firestore()
      .collection("items")
      .doc(id)
      .delete()
}

Then on the Delete button add this:

<button onClick={() => deleteItem(item.id)}>Delete</button>

If you test it you can see that the previous item we added it now deleted.

...and that's it for deleting an item on your list.

Edit Data

Now comes the pièces de résistance of this article. Up to this point, all of the functions could be easily be found on the web. For some reason, many people have skipped this part - updating a Firestore database using CRUD operations. Being a new developer, I could understand why; it's not an easy task, at least for new developers. For me, creating, reading, and deleting data is pretty straight forward. Each one of them requires one function. Editing/Updating requires several functions to work together. First you have to put your component in edit mode. Next you have to find what item you want to update. Finally, you get to use the function made to update to update your document. We'll start with step one: Edit mode.

Edit Mode

First we'll start with creating an updateitem.jsx file in the component folder. Then we'll add some boilerplate to it to make it work with React. The Update and Cancel buttons are inoperable until we hook them up to some functionality:

import React from "react"

const UpdateItem = () => {
  return (
    <>
      <h2>Update Item</h2>
      <form>
        <label htmlFor="Update Item">Update Item:</label>
        <input type="text" name="name" />
        <input type="text" name="type" />
        <input type="number" name="qty" />
        <input type="text" name="description" />
        <button>Update</button>
        <button>Cancel</button>
      </form>
    </>
  )
}
export default UpdateItem

Go ahead and import this component to the index.js file in the pages folder. Notice that I put it above the <AddItemForm />. This is important and will be shown why in a couple steps.

index.js

import React from "react"
//import firebase from "./components/firebase"
import ItemList from "./components/itemlist"
import AddItemForm from "./components/additemform"
import "./styles/global.css"
import UpdateItem from "./components/updateitem"
export default () => {
  return (
    <div>
      <h1>Firestore CRUD App </h1>
      <h2>Item List</h2>
      <ItemList />
      <h2>Add Item</h2>
      <UpdateItem />
      <AddItemForm />
    </div>
  )
}

In the index.js file add three useState hooks. One to determine whether we are in edit mode and another for the current item and another for initial item state. First, import useState from 'react'. Next, right above the return statement in index.js add the following:

index.js

import React, { useState } from "react"

export default () => {
  /*
  We don't know what is going to be edited so we set an
  empty set for the <UpdateItem /> form
  */
  const initialItemState = [
    { id: null, name: "", type: "", qty: "", description: "" },
  ]
  /*
  Make a state for whether or not edit mode is turned on.
  It will begin as false.
 */
  const [editing, setEditing] = useState(false)

  /*
  Apply the empty initialItemState from above to a
  currentItem state. currentItem will be used for
  editing individual items. 
  */
  const [currentItem, setCurrentItem] = useState(initialItemState)

  return (...)
}

We're going to set up an edit mode now. In the index.js file let's add a function to turn editing on and off. We are also going to add a ternary operation. Also add props to the ItemList and UpdateItem components. We will be accessing these in the next step.

index.js

  const editItem = () => {
    setEditing(true)
  }
  return (
    <div>
      <h1>Firestore CRUD App </h1>
      <h2>Item List</h2>
      /*
      Prop passed from the ItemList component
      */
      <ItemList editItem={editItem} />
      <h2>Add Item</h2>
      /*
      We add a ternary operator to switch
      between the UpdateItem form
      and the AddItemForm.
      */
      {editing ? <UpdateItem setEditing={setEditing} /> : <AddItemForm />}
    </div>
  )
}

This is where it starts getting a little tricky. Open the itemlist.jsx file and add an onClick to the Edit button. Additionally, we have to pass a prop to the index.js file to talk to the editItem() function we created above.

const ItemList = ({ editItem }) => {...
  /*
  We pass the editItem prop to the index.js file.
  */
  <button onClick={() => editItem()}>Edit</button>

  ...}

Open up the updateitem.jsx file and add an onClick() function to the Cancel button. Also add a setEditing prop as an argument to the UpdateItem component.

const UpdateItem = ({setEditing}) => {

  return (...
    <button onClick={()=>setEditing(false)}>Cancel</button>
  ...)

Up to this point we have covered Edit Mode.

Created an update item form.
Added several setState hooks to the index.js file.
Wrote an editItem function.
Added functionality to the Edit and Cancel buttons.

Turning Edit Mode on and off should now work.

What are we editing?

How does React know what item we want to update? Just because we selected the Edit button on the item we want to update, it doesn't mean we are updating that item. We have to set that item as the item we want to update. Open updateitem.jsx and import useState and useEffect. We are going to useState to set the item , and useEffect to perform side effects. The Effect Hook lets you perform side effects in function components:

itemlist.jsx

import React, { useState, useEffect } from "react";
/*
So far we have passed the setEditing prop to index.js.
Now we are going to pass the currentItem prop.
*/
const UpdateItem = ({ setEditing, currentItem }) => {
  /*
  Sets the state of the item to the current item
  */
  const [item, setItem] = useState(currentItem);

  /*
  Side effect is that without UseEffect if you start editing one item, 
  then try to switch to another item, nothing will happen.
  The component is already open, and although the state 
  on the parent has changed, it's not registered down to the props.
  We want to let the UpdateItem form component know the props have changed.
  With the Effect Hook, we create a callback function that updates the item 
  state with the new prop thats being sent through.
  */
  useEffect(() => {
    setItem(currentItem);
    //Added console.log to show what the current item is and that it has passed
    console.log("useEffect passes the currentItem: ", currentItem);
  }, [currentItem]);

  const onSubmit = e => {
    e.preventDefault();
    //When you click the submit button you can see what it being passed.
    console.log("onSubmit passes the id and items", { item });
  };

  return (
    <>
      <h2>Update Item</h2>
      <form onSubmit={onSubmit}>
        <label htmlFor="Update Item">Update Item:</label>
        /* Sets the value in the input boxes to the value you want to edit */
        <input type="text" name="name" value={item.name} />
        <input type="text" name="type" value={item.type} />
        <input type="number" name="qty" value={item.qty} />
        <input type="text" name="description" value={item.description} />
        <button>Update</button>
        <button onClick={() => setEditing(false)}>Cancel</button>
      </form>
    </>
  );
};
export default UpdateItem;

In the file itemlist.jsx we also need to add an argument to the Edit button:

<button onClick={() => editItem(item)}>Edit</button>

The index.js file also needs some added props and we also need to set the current item in the editItem function:

index.js

export default () => {...

  const editItem = (item) => {
    setEditing(true)
    setCurrentItem({
      id: item.id,
      name: item.name,
      type: item.type,
      qty: item.qty,
      description: item.description,
    })
  }
  return (...
<UpdateItem setEditing={setEditing} currentItem={currentItem} />
...)

If you run gatsby develop now, you will see that we can turn on editing mode, and the app recognizes what item we are editing. Open up the developer tools for your favorite browser (Press F12 or, if you're on Mac, then Cmd+Opt+J).

Almost done!

Update Function

Here is the final piece of the updating/editing puzzle for us. In index.js we are going to write a function to send information to Firebase. We are passing two arguments to it: the current item that we are are using to update and the updated item we want to send to replace the current item. I added a console.log() to show that the item is actually sent to Firestore. We are also going to add one more prop to <UpdateItem />

index.js

const updateItem = ({ currentItem }, updatedItem) => {
  console.log(
    "It sends the item to the updated item function:",
    updatedItem,
    currentItem.id
  );
  //When the Update button is pressed, it turns off editing
  setEditing(false)
  firebase
    .firestore()
    .collection("items")
    .doc(currentItem.id)
    .update(updatedItem);
};

<UpdateItem
  setEditing={setEditing}
  currentItem={currentItem}
  updateItem={updateItem}
/>;

Finally, we add an onChange event handler function to each input in updateitem.jsx.

const UpdateItem = ({ setEditing, currentItem, updateItem }) => {...

  const onChange = e => {
    const { name, value } = e.target
    setItem({ ...item, [name]: value })
  }
  }

  return (
    <>
      <h2>Update Item</h2>
      <form onSubmit={onSubmit}>
        <label htmlFor="Update Item">Update Item:</label>
        <input type="text" name="name" value={item.name} onChange={onChange} />
        <input type="text" name="type" value={item.type} onChange={onChange} />
        <input type="number" name="qty" value={item.qty} onChange={onChange} />
        <input
          type="text"
          name="description"
          value={item.description}
          onChange={onChange}
        />
        <button>Update</button>
        <button onClick={() => setEditing(false)}>Cancel</button>
      </form>
    </>
  )
...}

Wrapping it up

Don't worry if you're a little lost. I just wanted to fully explain the functionality of everything instead of just blasting an answer at you. I figure working things out is the best way to learn a concept. It took me two hours, on my own to understand the Create, Read, and Delete concepts but took me two days or about 16 hours to figure out the Updating part. I really have to give it up for Tania Rascia for her wonderful tutorials. Her website is pretty awesome and you can learn a lot from her with a lot of concepts. I am sure there is going to be some experts coming on here telling me I could've done it better this way but as I am a n00b, I figured it out this way, and with more expereience and practice I will find better ways to do things. Ff you want a challenge you could try useReducer(). I would love to see a tutorial on that using Firestore.

Here is the final code for all components and pages:

index.js

import React, { useState } from "react";
import firebase from "./components/firebase";
import ItemList from "./components/itemlist";
import AddItemForm from "./components/additemform";
import "./styles/global.css";
import UpdateItem from "./components/updateitem";
export default () => {
  const initialItemState = [
    { id: null, name: "", type: "", qty: "", description: "" }
  ];

  const [editing, setEditing] = useState(false);

  const [currentItem, setCurrentItem] = useState(initialItemState);

  const editItem = item => {
    setEditing(true);
    setCurrentItem({
      id: item.id,
      name: item.name,
      type: item.type,
      qty: item.qty,
      description: item.description
    });
  };

  const updateItem = ({ currentItem }, updatedItem) => {
    console.log(
      "It send the item to the updated item function:",
      updatedItem,
      currentItem.id
    );
    setEditing(false);
    firebase
      .firestore()
      .collection("items")
      .doc(currentItem.id)
      .update(updatedItem);
  };

  return (
    <div>
      <h1>Firestore CRUD App</h1>
      <h2>Item List</h2>
      <ItemList editItem={editItem} />
      <h2>Add Item</h2>
      {editing ? (
        <UpdateItem
          setEditing={setEditing}
          currentItem={currentItem}
          updateItem={updateItem}
        />
      ) : (
        <AddItemForm />
      )}
    </div>
  );
};

itemlist.jsx

import React, { useState, useEffect } from "react";
import firebase from "./firebase";
import "../styles/global.css";
const useItems = () => {
  const [items, setItems] = useState([]); //useState() hook, sets initial state to an empty array
  useEffect(() => {
    const unsubscribe = firebase
      .firestore() //access firestore
      .collection("items") //access "items" collection
      .onSnapshot(snapshot => {
        //You can "listen" to a document with the onSnapshot() method.
        const listItems = snapshot.docs.map(doc => ({
          //map each document into snapshot
          id: doc.id, //id and data pushed into items array
          ...doc.data() //spread operator merges data to id.
        }));
        setItems(listItems); //items is equal to listItems
      });
    return () => unsubscribe();
  }, []);
  return items;
};
const deleteItem = id => {
  firebase
    .firestore()
    .collection("items")
    .doc(id)
    .delete();
};
const ItemList = ({ editItem }) => {
  const listItem = useItems();
  return (
    <table className="tg">
      <tbody>
        <tr>
          <td className="tg-ycr8">Name</td>
          <td className="tg-ycr8">Type</td>
          <td className="tg-i81m">Qty</td>
          <td className="tg-a02x">Description</td>
          <td class="tg-6hdc"></td>
        </tr>
      </tbody>
      {listItem.map(item => (
        <tbody key={item.id}>
          <tr>
            <td className="tg-ycr8">{item.name}</td>
            <td className="tg-ycr8">{item.type}</td>
            <td className="tg-i81m">{item.qty}</td>
            <td className="tg-a02x">{item.description}</td>
            <td class="tg-6hdc">
              <button onClick={() => editItem(item)}>Edit</button>
              <button onClick={() => deleteItem(item.id)}>Delete</button>
            </td>
          </tr>
        </tbody>
      ))}
    </table>
  );
};
export default ItemList;

additemform.jsx

import React, { useState } from "react";
import firebase from "firebase";

const AddItemForm = () => {
  //useState() hook captures the value from the input value
  const [name, setName] = useState("");
  const [type, setType] = useState("");
  const [qty, setQty] = useState(null);
  const [description, setDescription] = useState("");

  /* The onSubmit function we takes the 'e' 
    or event and submits it to Firebase
    */
  const onSubmit = e => {
    /* 
    preventDefault is important because it 
    prevents the whole page from reloading
    */
    e.preventDefault();
    firebase
      .firestore()
      .collection("items")
      .add({
        name,
        type,
        qty,
        description
      })
      //.then will reset the form to nothing
      .then(() => setName(""), setType(""), setQty(""), setDescription(""));
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        placeholder="Name"
        value={name}
        name="name"
        //onChange take the event and set it to whatever is currently in the input.
        //e is equal to the event happening
        //currentTarget.value is what is inputted
        onChange={e => setName(e.currentTarget.value)}
        type="text"
      />
      <input
        placeholder="Type"
        value={type}
        name="type"
        onChange={e => setType(e.currentTarget.value)}
        type="text"
      />
      <input
        placeholder="Qty"
        value={qty}
        name="qty"
        onChange={e => setQty(e.currentTarget.value)}
        type="number"
      />
      <input
        placeholder="Description"
        value={description}
        name="description"
        onChange={e => setDescription(e.currentTarget.value)}
        type="text"
      />
      <button>Submit</button>
    </form>
  );
};
export default AddItemForm;

updateitem.jsx

import React, { useState, useEffect } from "react";

/* 
So far we have passed the setEditing prop to index.js. 
Now we are going to pass the currentItem prop
*/
const UpdateItem = ({ setEditing, currentItem, updateItem }) => {
  /*
  Sets the state of the item to the current item
  */
  const [item, setItem] = useState(currentItem);

  /*
  Side effect is that without UseEffect if you start editing one item, 
  then try to switch to another item, nothing will happen.
  The component is already open, and although the state 
  on the parent has changed, it's not registered down to the props.
  We want to let the UpdateItem form component know the props have changed.
  With the Effect Hook, we create a callback function that updates the item 
  state with the new prop thats being sent through.
  */
  useEffect(() => {
    setItem(currentItem);
    console.log("useEffect passes the currentItem: ", currentItem);
  }, [currentItem]);

  const onSubmit = e => {
    e.preventDefault();
    console.log("onSubmit passes the id and items", item);
    updateItem({ currentItem }, item);
  };

  const onChange = e => {
    const { name, value } = e.target;
    setItem({ ...item, [name]: value });
  };

  return (
    <>
      <h2>Update Item</h2>
      <form onSubmit={onSubmit}>
        <label htmlFor="Update Item">Update Item:</label>
        <input type="text" name="name" value={item.name} onChange={onChange} />
        <input type="text" name="type" value={item.type} onChange={onChange} />
        <input type="number" name="qty" value={item.qty} onChange={onChange} />
        <input
          type="text"
          name="description"
          value={item.description}
          onChange={onChange}
        />
        <button>Update</button>
        <button onClick={() => setEditing(false)}>Cancel</button>
      </form>
    </>
  );
};
export default UpdateItem;

firebase.js

import firebase from "firebase/app"
import "firebase/firestore"

const firebaseConfig = {
  apiKey: "your own api key",
  authDomain: "info fom firebase",
  databaseURL: "https://your-link-to-firebase-project.firebaseio.com",
  projectId: "info fom firebase",
  storageBucket: "info fom firebase",
  messagingSenderId: "info fom firebase",
  appId: "info fom firebase",
  measurementId: "info fom firebase",
}

// Initialize Firebase
firebase.initializeApp(firebaseConfig)

export default firebase

global.css (For minor styling of table)

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #000000;
}
.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #000000;
  color: #333;
  background-color: #fff;
}
.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #000000;
  color: #333;
  background-color: #f0f0f0;
}
.tg .tg-ycr8 {
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
}
.tg .tg-a02x {
  font-size: 100%;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
}
.tg .tg-i81m {
  background-color: #ffffff;
  text-align: center;
  vertical-align: top;
}

Did you like what you read? Want to see more?
Let me know what you think about this tutorial in the comments below.
As always, a donation to Vets Who Code goes to helping veteran, like myself, in learning front end development and other coding skills. You can donate here: VetsWhoCode
Thanks for your time!

Mapping Objects in React

Steve Clark 🤷‍♀️ — Wed, 15 Jan 2020 21:47:49 +0000

I am a student with Vets Who Code. VWC is a veteran-led and operated non-profit that focuses on training veterans, like me, in web development and software engineering principles, free of charge with the focus on starting careers as JavaScript developers.

The past couple of weeks we have been learning React. One of the first things we learned was how to map an array into a list (<li>Something here</li>) using the example on the React docs website. The example they use is:

const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
      <li>{number}</li>
    );

Pretty simple, but if you wanted to use BrowserRouter found in React Router API to map a navigation bar it's not so straightforward. The long way to do it is type it all out, like this:

    const NavBar = props => {
        return  (
            <Router>
                <ul className="nav">
                    <li>
                        <Link to="About">About</Link>
                    </li>
                </ul>
                 <ul className="nav">
                    <li>
                        <Link to="About">About</Link>
                    </li>
                </ul>
                ...and so on
            </Router>

What I wanted to do was combine the example on the React website and do it in the <Router>. I thought, why not put the path and the page in an object and then iterate through them?
Here is what I came up with:

NavBar component

const  NavBar = props =>  {
    const  links = props.links;
    const  items = Object.entries(links).map(([key, value])  =>  {
    return  (
        <li key={key.id}>
            <Link  to={value}>{key}</Link>
        </li>
    );
});
return  (
<Router>
    <ul className="nav">{items}</ul>
</Router>

App Component

const links = {
  Home: "./",
  Resume: "./resume",
  Projects: "./projects",
  About: "./about",
  Contact: "./contacts"
};
function App() {
  return (
    <div className="App">
      <Header />
        <NavBar links={links} />
      <Button />
    </div>
  );
}
export default App;

I am amazed at how powerful React is and what can be done with it. While I am only still hitting the wavetops, I can see why it is one of the most popular libraries in JavaScript.

Any comments? Let's start a discussion below.

Hey while you're here, Vets Who Code could sure use your help. Since 2014 they have been successfully training veterans in web development. A donation will be used to teach veterans how to program in javascript and help them get jobs in our amazing software engineering industry for free. To date they have exclusively helped over 150 veterans find careers as engineers at zero cost to veterans and spouses! You can donate here: https://vetswhocode.io/donate

Creating vs Consuming VWC

Steve Clark 🤷‍♀️ — Wed, 18 Sep 2019 18:12:39 +0000

Are you a creator or a consumer?

What kind of person are you? Do you wake up first thing in the morning and check Facebook or do you go and exercise?

It's easy to fall into a rut, sitting there, binge-watching Netflix, when we know there are better things to do.

Sometimes we consume too much. As developers, we should be trying to build something daily. For example, I am currently going through a coding bootcamp with Vets Who Code. We are required to create something every daily. Usually, it is through daily code challenges but it can also be something like this article, writing for dev.to. There are many different products that have code challenges on them that are suited for beginners, like me. One I like is edabit. There are pages and pages of code challenges that are both fun and challenging for every beginner to conquer.

What happens is that beginner's get caught in a tutorial loop, where you don't progress past a certain point. Creating something gets you past that point. It wakes up your brain and makes you want to learn more.

If you are having problems with finding something to create, look deeply at yourself and find your passions, your likes. What are you, as a person, most interested in? Just start with three. For me, its cycling 🚲, my pickle business 🥒, and motorsports racing 🏍.

There isn’t an exact formula for balancing creation with consumption. It doesn't even mean a 50/50 split. What you need to do is find where you sit and lean towards creating something every once in a while.

The easiest place to start is to ask yourself two questions:

How much have I created in the last month?
How much have I consumed in the last month?

A wise person once told me: "Never stop learning. Pair code with your passions."

How do you balance creating with consuming? Answer below.

DEV Community: Steve Clark 🤷‍♀️

React Tutorial — City/State Lookup using the US Postal Service API

Introduction

Goal

Front-end

Backend

Prerequisites

Typing vs Copying and Pasting Code

CORS 😈

Setup

Frontend Form

Netlify Functions

Serverless Functions

Putting it all together

Parsing XML to JSON

Nitin PatelFollow

Converting XML to JSON using Recursion

Nitin Patel ・ Sep 28 '18

Finishing up

Conclusion

Vets Who Code

How to normalize an input (Colloquially known as how to create an input mask)

Table of Contents

Motivation

Prerequisites

Setup

Project

Upper Case Mask

Upper case first letter

Phone number input mask

Wrapping it up

CodeSandBox

Live

Vets Who Code

JavaScript Primitives

Variables

Naming Conventions

Reserved keywords

Data Types

Primitives

Strings

Numbers

BigInt

Something to think about

Boolean

Exercise

Undefined

Symbols

Review Questions

Vets Who Code

How to Fork a Repo and get a free Vets Who Code sticker

Introduction

git

Steve Clark 🤷‍♀️ ・ May 6 ・ 7 min read

Table of Contents

Requirements

Fork a Repo

Instructions

Wrapping it up

Vets Who Code

git

Introduction

Requirements

Table of Contents

Create a Repository

Clone Your Repo Locally

Create a New Branch

Make, Add, Commit, and Push Changes

Making a Pull Request

Wrapping it up

Vets Who Code

React Tutorial — Upload and Fetch Photos with Cloudinary

Challenge Accepted

Goal

Table of Contents

Prerequisites

Cloudinary

Other Libraries/Frameworks

Set Up

Cloudinary Set Up