Welcome to my little corner of the web where I share articles on frontend development. Written by Kelechi Ogbonna, Frontend Developer

I share the difference between an array and a list in c sharp(C#). How to instantiate an array and a list, and when to use an Array vs a List.

Difference Between an Array and a List in C#


**Array**

An array stores a fixed amount of variables of the same data type(string, int, char). It is strongly typed and belongs to the `System.Array` Namespace.

There are 3 types of arrays:

- single dimensional
- Multi-dimensional
- Jagged

The most commonly used is the single-dimensional array.

**List**

A List is a dynamic array that increases and decreases according to data size. It stores a generic collection of objects.
It is not strongly typed(strings and numbers can be in a List) and belongs to the `System.Collection` namespace.


### How to instantiate an array and a List

**Array**

To instantiate an array, specify the variable **type**(string, int, char ), followed by the array **name** and then the array **length**.


```csharp
using System.Array; // import array class

int[] numberArray

numberArray = new int[] { 5, 3, 2, 9};

```

 **List**

To instantiate a List, call the **List** **class**, followed by the **type** in an angled bracket, and then the List **name**. 
The `new` keyword instantiates the List Class.


```csharp
using System.Collection; // import List class

List<int> listExample = new List<int>{5, 3, 2, 9};

// shorter version
var listExample = new List<int> {5, 3, 2, 9};

```

### Can I instantiate an empty array or List?

**Array**

You can create an empty array by setting the length to [0]. To instantiate the Array, You must specify the array length.

Use `Array.Empty<int>()` to instantiate an empty array instead of creating an empty Array with length[0].

```csharp
var newArray = new int[0] 

// recommended

var newArray = Array.Empty<int>();

```

**List**

Yes, you can instantiate an empty list. Because of its dynamic nature, the List will automatically increase or decrease in size as needed.

```csharp

var newList = new List<int>();

```

### How to check the length of an Array and a List

**Array**

`Length` returns the total number of elements in an array

```csharp

string[] total = new string[] {"love", "live", "life", "fly", "soar"}

Console.WriteLine(total.Length) // 5
```

**List**

`Count` returns the total number of elements in a list

```csharp
var total = new List<string> {"love", "live", "life", "fly", "soar"}

Console.WriteLine(total.Count()) //5
```

### When to use an Array vs A list

If the data size is fixed and you know the size of the data, or you want to optimise for a specific reason, then an Array can come in handy.
If the operation involves adding and removing data, use a List. It requires no resizing.

### Conclusion

A List is the preferred choice when it comes to choosing to use either an Array or a List, even when no data resizing is needed.
Most operations you want to use an Array for can be done with a List.

In this article, I share how to sort your blog posts by the most recent date

How to sort next.js blog posts by date


Recently, I added a new article to my blog and quickly realised the blog post list was sorted alphabetically. I wanted the blog posts with the most recent date at the top instead of having the post sorted alphabetically. In this article, I share how to sort your blog posts by the most recent date.

### Convert the date string to a date object
To sort the blog post by date, we need to convert the date string variable to a Date Object.

Every blog post has a date string included in the post’s Front Matter.

Manually writing code that converts a date string to a Javascript Date object can be difficult and time-consuming, I used **Luxon** to simplify the process.

**Luxon** is an npm library that simplifies working with dates and times in JavaScript.

install **Luxon** 

```jsx
npm install Luxon
```

Import it into the component file that renders your blog post list.

`/components/postList/postList.js`
```jsx
import { dateTime } from 'Luxon'
```

The [dateTime.fromFormat()](https://moment.github.io/luxon/api-docs/index.html#datetimefromformat) converts the date string to a Javascript Date Object.

[fromFormat()](https://moment.github.io/luxon/api-docs/index.html#datetimefromformat) is a function that creates a DateTime  from a text string( date string), and fmt(the format the string is expected to be in) parsers the input string using a date format we pass in as a second parameter.

[fromFormat()](https://moment.github.io/luxon/api-docs/index.html#datetimefromformat) takes two arguments, a date string and a format string.

```
DateTime.fromFormat('09-06-2022, 'm-d-yyyy')
```
This will format the date string into a date object that looks like  `06-09-2022`.

I fetch the date string variable from the date included in every blog post's Front Matter.

Example of the date string included in the Front Matter in the blog post markdown file.

![front-matter](/posts-images/front-matter-date.png)


With this date format `mm-dd-yyyy`, the post list  will be sorted by the most recent `month => day => year`. This way, the blog post with the most recent month, day, and year stays at the top of the post list.

> when I tested using the date format (dd-mm-yyyy), I did not get the desired result with the sort function.

### Order blog post by most recent date

Now that the date string has been converted to a Javascript Date object, use the javascript built-in `sort` function to sort the blog posts in descending order.

In the src folder, go to the component displaying your blog post list, create a variable `sortBlogPostsByDatesort` and assign the sort function code to the variable

`/components/postLists/postLists.js`
```jsx
const sortBlogPostsByDate = posts.sort((a, b) => {
    const beforeDate = DateTime.fromFormat(a.frontmatter.date, 'm-d-yyyy')
    const afterDate = DateTime.fromFormat(b.frontmatter.date, 'm-d-yyyy')
    return afterDate - beforeDate
  })
```

The new Array data `sortBlogPostsByDate` contains the sorted blog posts with the most recent article displayed at the top of the list.

Finally using a javascript map function, loop through the sorted post data to display the blog posts list on the dom.

`/components/postLists/postLists.js`
```jsx
return (
    <div className="postlist">
      {posts &&

        sortBlogPostsByDate.map((post) => {

          return (
            <DivList key={post.slug}>
            
              <Link href={{ pathname: `/${post.slug}` }}>
                <PostTitle href={`/${post.slug}`}>
                  {post.frontmatter.title}
                </PostTitle>
              </Link>

              <PostData>
                <PostTag>{post.frontmatter.tags}</PostTag>
                <PostDate className="post-date">
                  {post.frontmatter.date}
                </PostDate>
              </PostData>

              <PostText>{post.frontmatter.description}</PostText>

            </DivList>
          )
        })}
    </div>
  )
  ```


Your Blog post list should be sorted now, with the most recent post at the top of the list.

Final Result!

![Final result](/posts-images/sort-blog-post-by-date.png)

Discuss on [Medium](https://agirlcodes.medium.com/how-to-sort-next-js-blog-posts-by-date-1665b641842b)


*Recommended Reads*

- [Setup a Newsletter with Next.js and Mailchimp.](https://www.agirl.codes/setup-newsletter-mailchimp-nextjs)

- [Find out how I solved this Jest storybook react interopRequireDefault.js test error.](https://www.agirl.codes/storybook-test-error-cannot-find-interopRequireDefaultjs)

I share git commands I find myself using most often in my day-to-day job as a Software Developer

My most used git commands


In this article, I share git commands I find myself using most often in my day-to-day job as a Software Developer. I ran a survey among my Dev friends to find out their most used git commands, and the list is pretty similar except for 1 or 2 git command differences.

First I will list out my most used git commands, then a small list of the git commands I use quite a bit but not as regularly. For each of the commands, I will give a brief example of how it can be used. Lastly, I added a list of git commands mentioned by Developer friends as their most used commands.

## My Most used git command list with examples

- git status
- git add
- git commit
- git push
- git pull
- git checkout
- git merge


### Git Status

I use **git status command** to check how many files have been changed and have not been committed.

```
git status
```

Here, I have 1 file that has not been added to git and 1 file whose content was recently changed.

![git status](/posts-images/git-commands/git-status-result.png)


### Git Add

I use this command to add newly created files or recent file changes to a staging area where they wait to be committed.

There are 2 ways to add all files to the staging area:

#### a) Git add —all

Since I started working on a [monorepo](https://en.wikipedia.org/wiki/Monorepo#:~:text=In%20version%20control%20systems%2C%20a,as%20a%20'shared%20codebase'.), I use `git add --all` to add all files I have made changes to no matter the project directory.

#### b) Git add .

I use `git add .` to add all files I have updated in the project directory.

If you use vscode, the saved changes will move to staged Changes

![vscode](/posts-images/git-commands/vscode-staged-changes.png)

Another way to check if files have been committed is by typing **git status** in the terminal, the files now highlighted in the green show it has been staged but not committed.

![git-add-all](/posts-images/git-commands/git-add-all.png)

The third part of the git add command is where we specify the files we want to add. So “--all” and “.” means all files. We could also specify which files want to add by doing: 

```
git add dir/file1.js dir/file2.js
```
![git-add](/posts-images/git-commands/git-add.png)

### Git Commit

This command saves your recent changes in the project’s version control history locally.
This command can be used in a short format.

**git commit -m <message>**

This option lets you commit your work with a short / one line message

```
git commit -m 'update article with pictures'
```


![git-commit-m](/posts-images/git-commands/git-commit-m.png)

**git commit**

This is the same as the command above, but it opens up a vim editor where you can write longer, better-structured commit messages that support multiple lines.

![git-commit](/posts-images/git-commands/git-commit.png)

>  If you want to use the git commit command, learn how to use a to write a message, save and quit the vim editor. Or you can change your git editor of choice to Nano.

### Git Push

I use the **git push command** to send locally committed changes to the GitHub remote branch. This ensures that the branch on the remote repository contains all the updates made on the local branch.

```
git push
```

![git-push](/posts-images/git-commands/git-push.png)

For a newly created local branch, this command is used to set up a remote branch with the same name as the local branch.

```
git push -u origin <branch_name>
```
or the default by git

```
git push --set-upstream <remote> <branch_name>
```

### Git Pull

I use the **git pull command** to keep my git local repositories content up-to-date with what is currently in the remote repository.

```
git pull
```
### Git checkout

I use this to switch branches.

```
git checkout <branch name>
```

![git-checkout](/posts-images/git-commands/git-checkout.png)

#### Git checkout -b

This creates a new branch from an existing branch and  automatically switches to the new branch.
```
git checkout -b <branch name>
```
![git-checkout-b](/posts-images/git-commands/git-checkout-b.png)

### Git Merge

I use this command for updating commits present in the parent branch(dev or main ) with my working branch. For example, A colleague worked on a feature branch named `add-navigation`, which has been merged into the `main branch`.

If I want my `feature branch` to have the same updates as the `main branch`, I use **git merge** to transfer commits present in the `main branch` to the feature branch that I am working on.

 #### How to merge a feature branch into the main branch

make sure you checkout to the `main branch`  and run the **git merge** command.

```
git checkout main
git merge <branch name>
```

![git-merge-main](/posts-images/git-commands/git-merge-main.png)


#### How to merge the main branch into a feature branch

**git merge** can be used to merge branches in the opposite direction too. When I finish working on a feature branch, I use **git merge** to add the work done on my `feature branch` to the `main branch`.

Make sure the `local main` is up to date with the `remote main branch`.

```
git pull
```
checkout to the `feature branch` and run the git merge command.

```
git checkout <feature-branch>
git merge <branch name>
```

![git-merge-feature](/posts-images/git-commands/git-merge-feature.png)


## Often used Git commands List with examples

These commands I frequently use but not as much as my most used commands.

- git log --oneline
- git branch -d
- git reset
- git rebase

### git log --oneline

This displays your git commit history as a one-line short message, making scanning through previous commit messages easy.

```
git log --oneline
```
![git-log-online](/posts-images/git-commands/git-log-oneline.png)

### git branch -d

I use this command to delete local branches I no longer need.

```
git branch -d
```
![git-delete](/posts-images/git-commands/git-delete.png)


### git reset head

I use this command when I want to undo a commit to a certain commit in a file. You can use **git --oneline** to get the short version of the commit hash you want the code to reset to.

```
git reset head <commit hash>
```

## Notable mentions from Developer friends of their most used git commands

These are some of the commands I found from Dev friends that are different from my most often used commands.

- git rm -cached flag
- git stash
- git cherry pick <commit hash >
- git rebase


### git rm --cached flag

**git rm --cached** command remove files from your local git repository. The **--cached flag** deletes the file from your git repository, it becomes an untracked file in your project folder. Note you have to commit the changes.

```
git rm <file Relative path> --cached
```

![git-rm-cached](/posts-images/git-commands/git-rm-cached.png)

### git stash

Say you are working on a `feature branch` and you need to work on something else but don’t want to commit the changes just yet.
You use a **git stash** command to save the changes temporarily without having to commit them. This lets you switch between branches and back to your  `feature branch`, easily retrieve the stashed changes and continue working on it.

```
git stash --include-untracked or git stash -u
```

![git-stash](/posts-images/git-commands/git-stash.png)

### git cherry pick <commit hash >

You use this command when you want to get a single commit from another branch into your working branch. Think of it like this, instead of using **git merge**
 to add all the commits from another branch into your working branch just to get one particular commit from that branch, you use git **cherry pick<commit hash>** to merge that particular commit into your branch.

```
git cherrypick 0c2e231
```

### git rebase

**git rebase** solves the same problem as **git merge** but does it differently. Instead of using a merge commit, rebasing re-writes the project history by creating brand new commits for each commit in the original branch.

More Information on the [difference between merge and rebase](https://www.atlassian.com/git/tutorials/merging-vs-rebasing).

## Conclusion

It was fun learning about what git commands fellow developers mostly use in their day-to-day jobs. Apparently, we share almost the same list, with a sprinkle of a few command differences.

Do share your most used git command list with me on [medium](https://agirlcodes.medium.com/my-most-used-git-commands-ff031b2c77c4)


*Recommended Reads*

- [4 New ES2021(ES12) Features JavaScript Developers Need to Know'](https://www.agirl.codes/4-new-es2021(es12)-features-javascript-developers-need-to-know).

- [How to check if an object is empty](https://www.agirl.codes/my-most-used-git-commands).



In this article, I am going to highlight how I got this storybook jest snapshot test error "cannot find @babel/runtime/helpers/interopRequireDefault.js" and  what I did to fix this jest snapshot test  error

How to solve Jest storybook test error “cannot find interopRequireDefault.js”


In this article, I am going to highlight how I got this storybook jest snapshot test error `cannot find @babel/runtime/helpers/interopRequireDefault.js`, what I tried to fix the error that didn’t work, and what did work.

 ![failed storybook test](/posts-images/failed-storybook-test.png)

### What caused this error?

I wanted to update my current branch with the master branch. In the process, I encountered a merge conflict with the storybook snapshot test. The incoming test file had been updated with new tests. I accepted both changes without duly reviewing them and that must have caused some data to be repeated or redundant.

### What I tried to fix the issue?

Usually, when I get errors like this that have a `package can't be found` error, I delete and re-install `node_modules`, `package-lock.json`. In this case, It did not help

Next, after some more research, I tried installing  `@babel/runtime` as a dependency to the project based on some StackOverflow recommendations, but that still didn’t fix it.

### What Solved the Error?

Deleting the Jest cache directory. I added this command to my package.json and ran it.

```js

"test": "react-scripts test --clearcache"

```

This clears the cache without running the test. Jest possible had the old snapshot test data cached and didn't know what to do with the new changes. Remove the cache and run the test once more, 

 ![storybook test result](/posts-images/storybook-test-result.png)

 ### Conclusion

Jest stores information in the cache to improve test performance, I suspect the merge with new data must have clashed with the cache data, thereby confusing Jest.

Discuss on [Medium](https://agirlcodes.medium.com/how-to-solve-jest-storybook-test-error-cannot-find-interoprequiredefault-js-a17bf1e0088f)


*Recommended Reads*

- [How to sort next js blog posts by most recent post date.](https://www.agirl.codes/sort-nextjs-blog-posts-by-date)

- [Setup a Newsletter with Next.js and Mailchimp.](https://www.agirl.codes/setup-newsletter-mailchimp-nextjs)

In this tutorial, you will learn how to set up a Newsletter on your Next Js blog with Mailchimp.

Setup a Newsletter with Next.js and Mailchimp


Having a Newsletter subscription on your blog can be beneficial. It provides a way for you to keep your readers up to date with your content, drive traffic to your blog, and It is a great way to communicate with your readers.

In this tutorial, you will learn how to set up a Newsletter on your Next Js blog with Mailchimp.

### Why Mailchimp?
MailChimp is a popular online marketing tool that you can use to manage your email list when you start getting subscribers. They have a free version for people with 2000 contacts or less. It's good enough for people beginning their newsletter journey.

### Mailchimp Setup
To get started, [create an account with Mailchimp](https://mailchimp.com/help/create-an-account/). When a user subscribes to your newsletter, the email address is added to your `Audience`. Mailchimp gives you `API Keys` that you can use in other apps to access your account.

To connect to the API we will need three environmental variables from Mailchimp;

- [your generated API Key](https://mailchimp.com/help/about-api-keys/#find+or+generate+your+api+key)
- [API Server](https://mailchimp.com/developer/marketing/guides/quick-start/#make-your-first-api-call)
- [Audience Id](https://mailchimp.com/help/find-audience-id/)


### Get started with Next Js

We will need a form to collect the user’s email and an API that will receive the form submission and save the email on Mailchimp. Luckily, NextJs provides us with the ability to do both without creating a separate backend application using NodeJs.

All we need to create a simple API is to create a pages/api folder in our next Js application. Next Js will map any file inside to /api/* directory and it will becomes an endpoint instead of a page.

We can now begin by creating a fresh NextJs application by running the following command.

```js
npx create-next-app@latest
```

### Setup environment variables for development and production
It's best practice to store environment variables in `.env` files, do not push your environment variables to your remote branch. remember to add the `.env.local` file to .gitignore.

**Local Setup**

Create a `.env.local` file. file in the root folder of your next js application. Place your environment variables in that file:
```js
MAILCHIMP_API_KEY="your-mailchimp-api-key"
MAILCHIMP_AUDIENCE_ID="your-mailchimp-audience-id"
MAILCHIMP_API_SERVER="your-api-server-prefix"
```

**Production Setup**

I have my blog app deployed on Netlify. 

[To add these variables to Netlify](https://docs.netlify.com/configure-builds/environment-variables/), go to Site settings > Build & deploy > Environment > Edit Variables.

[Add environment variables in Vercel](https://vercel.com/docs/concepts/projects/environment-variables).

### Create Server-side API request

Create `pages/api/subscribe.js` and paste the following code inside it: 

```jsx
import axios from 'axios'

export default async (req, res) => {
  const { email } = req.body

  if (!email || !email.length) {
    return res.status(400).json({ error: 'Email is required' })
  }

  const API_KEY = process.env.MAILCHIMP_API_KEY
  const API_SERVER = process.env.MAILCHIMP_API_SERVER
  const AUDIENCE_ID = process.env.MAILCHIMP_AUDIENCE_ID
  
  const url = `https://${API_SERVER}.api.mailchimp.com/3.0/lists/${AUDIENCE_ID}/members`

  const data = {
    email_address: email,
    status: 'subscribed'
  }

  const options = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `api_key ${API_KEY}`
    }
  }

  try {
    const response = await axios.post(url, data, options)
    if (response.status >= 400) {
      return res.status(400).json({
        error: `There was an error subscribing to the newsletter. Shoot me an email at ogbonnakell@gmail and I'll add you to the list.`
      })
    }
    return res.status(201).json({ message: 'success' })
  } catch (error) {
    console.log(error)
    return res.status(500).json({ error: error.message })
  }
}
```
[Axios](https://www.npmjs.com/package/axios) provides a simple and clean way for us to make API requests. We are importing it inside the `subscribe.js` file because we will use it to make a post request to the [Mailchimp marketing API](https://mailchimp.com/developer/marketing/api/list-members/add-member-to-list/). Be sure to install it using the following command:

```js
npx install axios
```

We are creating an async function that takes a `request` and `response` as parameters. This is the function that handles our API request.

The If block adds a validation check so that the email request body isn't an empty string.

Use `process.env` to grab the env variables, update the Mailchimp URL with the env variable.

Create a data object containing the email address and a subscribed status. An `option` object that tells the content type and sets the authorisation header to your `api_key`.

The code in the `try block` makes a post request to the URL endpoint using axois with the data and options passed in as parameters. 

If the email input field is empty or invalid, a 400(bad request
) status error response is returned, else a 201(created) status response is returned. In case of any other errors, a 500 server error is returned. 

**Note**: It's important to be sure of the arguments Mailchimp API takes. While working on this, I added a `first name` input field to the data object and the API kept returning a 500 server error. I studied what the Mailchimp API takes in as arguments and that solved the server response problem for me. That is after trying to get a form field for `first name` and `email` to work. The moral of this part is to be sure of the data structure the  API will need before creating the frontend UI for it.

To add additional params, [see the full list of available params](https://mailchimp.com/developer/marketing/api/list-members/add-member-to-list/).

### Create Newsletter form component
 Now we have an API that takes an email and submits it to Mailchimp API. Let's create the client-side UI where user can input their email to subscribe. I used `styled-components` for styling the form component.

Create a `Subscribe.js` file in `src/components` folder with the following code:

```jsx

function Subscribe() {

  const [email, setEmail] = useState('')
  const [state, setState] = useState('idle')
  const [errorMsg, setErrorMsg] = useState(null)

  const subscribe = async (e) => {
    e.preventDefault()
    setState('Loading')

    try {
      const response = await axios.post('/api/subscribe', { email })
      console.log(response)
      setState('Success')
      setEmail('')
    } catch (e) {
      console.log(e.response.data.error)
      setErrorMsg(e.response.data.error)
      setState('Error')
    }
  }

  return (
    <SubscribeContainer>
      <h4 className="sub-header">Subscribe to the newsletter</h4>
      <p className="sub-text">
        Get to notified on quality articles about frontend development and more
        sent to your inbox. I'll send you an email once a month, no spam.
      </p>
      <form onSubmit={subscribe}>
        <SubFormContainer>
          <div className="form-input">
            <input
              required
              id="email-input"
              name="email"
              type="email"
              placeholder="What's your email address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="sub-form-btn">
            <button
              disabled={state === 'Loading'}
              type="submit"
              className="form-btn"
              onClick={subscribe}
            >
              Subscribe
            </button>
          </div>
        </SubFormContainer>
        {state === 'Error' && (
          <ErrorState className="error-state">{errorMsg}</ErrorState>
        )}
        {state === 'Success' && (
          <SuccessState>Awesome, you've been subscribed!</SuccessState>
        )}
      </form>
    </SubscribeContainer>
  )
}

export default Subscribe

```

In this component, I am creating three state variables:
- email 
- loading
- error

When a user clicks the `Subscribe button`, *Subscribe function* is called.
The state is set to `Loading` while the request is being made to the API.

Based on the response we get, the state is either set to `Success` for a successful submission or `Error` and returns an error message.

While waiting for the server response, the state is set to `Loading`, the button is set to `disabled`. I did this to prevent users from clicking the button again and as a way to let them know their request is processing.

```jsx

{
  state === 'Error' && (
    <ErrorState className="error-state">{errorMsg}</ErrorState>
  );
}
{
  state === 'Success' && (
    <SuccessState>Awesome, you've been subscribed!</SuccessState>
  );
}

```
This displays the API response to the client. If there are no errors, the email is added to your Mailchimp audience dashboard.

### Fix API route not found in a Next.js App Production Environment.

Be sure to test your subscription form in the production environment. While my subscribe form worked well locally,  I discovered it wasn't working in production. It returned a `404 not found` error. The reason was that [API Routes can't be used with next export](https://nextjs.org/docs/api-routes/introduction#caveats). After removing `next export` from my build script, It worked as expected.

**Final Result**

 ![newsletter](/posts-images/newsletter-blog.jpg)


### Conclusion

To view the complete code, checkout out my blog source code on [GitHub](https://github.com/Kellswork/agirl.codes/blob/main/pages/api/subscribe.js).

I hope this article was helpful. If you have any questions or comments, do share on [medium](https://medium.com/@agirlcodes/setup-a-newsletter-with-next-js-and-mailchimp-d9933cfd785e)

*Recommended Reads*

- [How to sort next js blog posts by most recent post date.](https://www.agirl.codes/sort-nextjs-blog-posts-by-date)

- [Find out how I solved this Jest storybook react interopRequireDefault.js test error.](https://www.agirl.codes/storybook-test-error-cannot-find-interopRequireDefaultjs)

- [The Complete Guide to Building React Forms with useState Hook.](https://www.agirl.codes/complete-guide-build-react-forms-with-usestate-hook)


This tutorial teaches how to build forms in react with uesState hook, how to pass the data as props to another react component and have it rendered to the browser

The Complete Guide to Building React Forms with useState Hook


In this tutorial, You'll learn how to build forms with one or more input fields using JSX, understand how a html uncontrolled form transforms to a React controlled state form, retrieve the form data when submitted and save it to state using useState hook and finally, pass form data as props to a component and have the component render the data on the browser.

The project we will be building is a Contact form with three input fields for the contact's name, email, and phone number. when the form is submitted, the form data will be saved in a contacts state and passed to a contact list component, where it is rendered to the browser. 

If you want a quick overview of how to build forms with multiple input fields using react hook, you can view it [here](https://www.agirl.codes/how-to-build-forms-with-multiple-input-fields-using-react-hooks). This article will beginner-focused or for anyone who wants to refresh their knowledge on react building React forms with useState hook.

### 1. Build a simple React form with multiple input fields

```jsx
npx create-react-app contact-info

```

Get rid of everything you don't need, here's a link to what my app looks like after getting rid of content and files I don't need; [Cleanup application](https://github.com/Kellswork/contact-info/tree/cleanup-application)

In the src folder, create a file `src/components/ContactForm.jsx`, this component  contains the code to build the form.


```jsx

export default function UserForm() {

  return (
    <div>
      <form>
        <div>
          <h3>Contact Form</h3>
        </div>
        <div>
          <input
            type="text"
            name="name"
            placeholder="Name"
          />
        </div>
        <div>
          <input
            type="email"
            name="email"
            placeholder="Email"
          />
        </div>
        <div>
          <input
            type="number"
            name="phonenumber"
            placeholder="Phone Number"
          />
        </div>
        <div>
          <button>Submit Contact</button>
        </div>
      </form>
    </div>
  );
}

```

 Adding the `type` to the input field, HTML validates the email and number input.It will check that whatever the user inputs for `email` is an email and for `phone number`, must be a number.

Import `UserForm.jsx` into `App.js` to see the form rendered on your browser.

``` jsx
import ContactForm from "./components/ContactForm.jsx";
import "./App.css";

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

export default App;

```
### 2. Converting JSX Form to a Controlled Form with React Hooks

Now that we have a simple form being rendered on the browser, we are going to convert the form input state to be controlled by React. By default, forms handle their own state. Converting the form to a controlled state is telling React to take over the form state from the browser in the following ways;

- Creating a `state` object to store the form data. React uses the `useState hook` to handle the form state.
- Add the `value` property to the form, and assign it to the `state` object properties.
- Add an `onChange event listener` function to handle updating the form state.

`useState` is a React hook used to manage state in functional components. 

`state` is the information we don't want to lose while the page re-renders.

Navigate to `src/components/ContactForm.jsx` , import `useState` hook from react.

Create a  `contact` state with the form input names as the properties.

Add `value` property to each input field and set the value to contact state properties as illustrated below.


```jsx

import { useState } from "react";

export default function UserForm() {

  const [contactInfo, setContactInfo] = useState({
    name: "",
    email: "",
    phonenumber: "",
  });

  return (
    <div className="form-container">
      <form>
        <div>
          <h3>Contact Form</h3>
        </div>
        <div>
          <input
            type="text"
            name="name"
            placeholder="Name"
            value={contactInfo.name}
          />
        </div>
        <div>
          <input
            type="email"
            name="email"
            placeholder="Email"
            value={contactInfo.email}
          />
        </div>
        <div>
          <input
            type="number"
            name="phonenumber"
            placeholder="Phone Number"
            value={contactInfo.phonenumber}
          />
        </div>
        <div>
          <button>Submit Contact</button>
        </div>
      </form>
    </div>
  );
}

```

React now has control over the form but we are yet to update the input fields.

we are setting the `value` in the input fields to the `contact` state properties.

 If you check your form in the browser, you will realise you can't type in the input fields, that's because React has no way to track the value of input elements.

 ![contact-form](/posts-images/react-forms/jsx-contact-form.png)

 The `onChange event Listner` is how React updates the input fields in real-time.

Let's add a  `handleChange` function to take care of updating the input fields. Add this  below `contact` state. 

```jsx
const handleChange = (event) => {
    setContactInfo({ ...contactInfo, [event.target.name]: event.target.value });
  };
```

`setContactInfo` is a function that comes with `useState Hook` and it's used to update our current state object.

To preserve the previous state, we spread the `contactInfo` data using the javascript spread operator. This way, the previous data is not lost while we update the input state. 

For example, without spreading the previous state, the only state that will be saved in the `contact` state when you submit your form data is `phone number`. `setContactInfo` will replace the old state with the new state which will be the last input field you updated(`phone number`).

To handle multiple controlled input elements, the name attribute added to each input element is used by `setContactInfo` to update the `contact state` properties based on the values from `event.target.name`.

### 3. Retrieving Form Data from Controlled Input Field.

Now, Let's log the form data to the console using a `handlesubmit` function.

The `handleSubmit` function will log the `contactInfo` state to the browser. 

Navigate to `ContactInfo` and add the `handleSubmit` function. 

Pass the `handleSubmit` function to an `onSubmit event listener` in the `<form>` tag. When the submit button is clicked, the user data is logged to the console.

```jsx
const handleSubmit = (event) => {
    // prevents the submit button from refreshing the page
    event.preventDefault();
    console.log(contactInfo);
  };



<form onSubmit={handleSubmit}> 
  
```

 ![submit-form](/posts-images/react-forms/jsx-submit-form.png)

 Last, let's clear the input field when the submit button is clicked, set the `contactInfo` state variable to an empty string. Update `handleSubmit` function like so

```jsx
const handleSubmit = (event) => {
    event.preventDefault();
    console.log(contactInfo);
    setContactInfo({ name: "", email: "", phonenumber: "" });
  };
```
### 4. Display Form Data in Another Component

in this phase, you learn how to pass data from parent component to child component. This data will be passed from `App.js`(parent) to the `ContactList` (child) component where it is displayed.

Now that we have our form data, let's display this data in `ContactList.jsx`.

Before that, let's create a `contacts` state in `App.js` to store each `contactInfo` object data gotten from `ContactForm.jsx`. It serves as data.
This `contacts` state will be passed as props to the `ContactList.jsx` component.

Navigate to App.js and create a `contacts` state using `useState` React Hook and set it to an empty array.

Create an `addContact` function that takes `contactInfo` as a parameter for updating the `contacts` state.

pass `addContact` function as `props` to the `ContactForm.jsx` component. This is also an example of passing data from parent to child component.

```jsx
import { useState } from "react";
import ContactForm from "./components/ContactForm.jsx";
import "./App.css";

function App() {
  // here we create an array state to store the contact form data
  const [contacts, updateContacts] = useState([]);

  const addContact = (contactInfo) => {
    updateContacts([...contacts, contactInfo]);
  };
  console.log(contacts)

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

export default App;
```

Using object [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) in javascript, get `addContact` from props, Update the `handleSubmit` function so instead of logging the data to the console, pass it as a parameter to the addContact function.

```jsx
import { useState } from "react";

export default function UserForm({addContact}) {
 
const handleSubmit = (event) => {
    event.preventDefault();

    addContact(contactInfo);

    setContactInfo({ name: "", email: "", phonenumber: "" });
  };
```

When you submit the form, the `contacts` state is updated with the new form state.

Now that we have an array of contacts, let's display each contact info in a `ContactList` component.

#### Pass `Contacts` state data as props to a React component.

 Last on the agenda is setting up the `ContactList.jsx` to display the `contacts state` data.

create a `ContactList` file in `src/components` and export a simple `<div>` tag to prevent the app from breaking.

Import `ContactList` file into `App.js` and pass `contacts` data as props to `contactList` component

```jsx
import { useState } from "react";
import ContactForm from "./components/ContactForm.jsx";
import ContactList from "./components/ContactList.jsx";
import "./App.css";

function App() {
  // here we create an array state to store the contact form data
  const [contacts, updateContacts] = useState([]);

  const addContact = (contact) => {
    updateContacts([...contacts, contact]);
  };
  console.log(contacts)

  return (
    <div className="App">
      <ContactForm addContact={addContact} />
      <ContactList contacts={contacts} />
    </div>
  );
}

export default App;
```

Navigate to `src/ContactList.jsx`, retrieve the props data passed into the component using destructing as we did for `ContactForm.jsx`.

Due to `contacts` data being an array, we need a way to display each `contact` detail.  I'm using `Array.prototype.map()` to loop through each value in and setting the `key` attribute  value to `phone number` because it is guaranteed to be unique. The `key` attribute is how React keeps track of the values in the array.

the `<p>` tag is used to display `name`, `email` and `phone number` of each contact object

```jsx

export default function UserList({contacts}) {
  return (
    <div>
      {props.contactList.map((contact) => (
        <div className="card" key={contact.phonenumber}>
          <p className="card-name">{contact.name}</p>
          <p>{contact.email}</p>
          <p>{contact.phonenumber}</p>
        </div>
      ))}
    </div>
  );
}
```

At this point, when you fill the form and click on the submit button, the data is displayed on the page.

 ![form-result](/posts-images/react-forms/form-result.png)

### Conclusion

In this tutorial, I covered;

- how to set up a basic React app using create-react-app and create a simple jsx form.
- how React converts an uncontrolled form to a controlled form component.
- how to retrieve the form data and pass it as props to another component.
- Create a React functional component that takes the form data as props and renders it to the browser.

> To view the full project code, link to [Github repository](https://github.com/Kellswork/contact-info).

Discuss on [Medium](https://medium.com/@agirlcodes/the-complete-guide-to-building-react-forms-with-usestate-hook-e3d282ff0025)


*Recommended Reads*

- [How to sort next js blog posts by most recent post date.](https://www.agirl.codes/sort-nextjs-blog-posts-by-date)

- [My Most used git commands](https://www.agirl.codes/my-most-used-git-commands).

- [Find out how I solved this Jest storybook react test error.](https://www.agirl.codes/storybook-test-error-cannot-find-interopRequireDefaultjs)

- [Setup a Newsletter with Next.js and Mailchimp](https://www.agirl.codes/setup-newsletter-mailchimp-nextjs).



These new Javascript features have reached final stage of the Ecmascript proposal and are included in the latest draft. It will be published between June 2021 and Jul 2021.

4 New ES2021(ES12) Features JavaScript Developers Need to Know


These new Javascript features have reached the [final stage](https://github.com/tc39/proposals/blob/master/finished-proposals.md) of the Ecmascript proposal and are included in the latest draft. It will be published between June 2021 and July 2021. For now, they can only be used with Babel.

### 1. Logical Assignment Operators

This feature combines mathematical assignment operators with the most often used Logical operators like so `(??=, &&=, ||=)`. It provides a neatly short and concise expressive style. This concept confused me a bit at first, refactoring it from an *IF statement* to a *Logical Assignment*  helped me understand how it works.

#### Logical OR Assignment  ( || = )

```jsx
let person = {name: 'Mary' , job:'specialist', sex: '' }

person.name ||= 'user'
console.log(person.name) // Mary

person.sex ||= 'not specified'
console.log(person.name) // not specified


//popular way using if statement
if(!person.name) person.name = 'user'
if(!person.sex) person.sex = 'not specified'

// or
person.name = person.name || 'user'
person.sex = person.sex || 'not specified'
```

 Logical OR operation does a short circuit evaluation.

 If the first operand is *truthy*, it returns the value. Else it returns the second operand.

 In the first example `person.name` is *truthy* so it was returned, in the second `person.sex` is empty therefore *falsey* so it returned `not specified` .

#### Logical AND Assignment  ( && = )

```jsx
let person = {name: 'Mary' , job:'specialist', sex: 'female' }

const changeJob =() => 'hustler';

person.job &&= changeJob()
console.log(person.job) // 'hustler'


//popular way using if statement
if(person.job) changeJob()

// or
person.name = person.name && changeJob()

```

If the first operand is *truthy*, `changeJob()` is called. Else if it's *falsey*, it stops the execution and returns `person.job` value.

#### Logical Nullish Assignment  ( ?? = )

```jsx
let person = {name: 'Mary' , job:'specialist', sex: 'female' }

person.sex ??= 'not specified'
console.log(person.sex) // female

person.location ??= 'lagos'
console.log(person.location) // lagos

//popular way using if statement
if(person.location == null || person.location == undefined) {
    person.location = 'lagos'
}

```

nullish operator will only assign a value to a variable if it is null or undefined.

In this case `person.location` == `null` and was assigned `lagos` value.

### 2. Numeric Separators

This feature helps large numbers in javascript become easier to read and understand.

it uses underscore( _ ) to improve readability both in integers and floating points (numbers in JS are floats).

```js
//before
1000000  // squints eye, counts Zeros carefully

// now
1_000_000 // Oh it's a million

let price = 23_000  // $23,000
    price = 230_00  // $230. zeros after underscore is for cent
    price = 2340_00  // $2,340
    price = 1213_0500  // $1213.05

```

### 3. Promise.any() + Aggregator

**Promise.any()** accept an array of `Promise` objects and returns the first promise object to be fulfilled or resolved.

```js
const promise1 = new Promise((resolve) => setTimeout(() => resolve('number 1'), 30)
const promise2 = new Promise((resolve) => setTimeout(() => resolve('number 2'), 20)
const promise3 = new Promise((resolve) => setTimeout(() => resolve('number 3'), 10)

 try {
  const first = await Promise.any([ promise1, promise2, promise3 ]);
  console.log(first) // number 3
  // any promise that resolves first in this case, promise3. 

} catch (error) {
  // All of the promises were rejected.
}
```

**AggregateError** is an object that holds rejection reasons for all promises that were rejected. In the above example error is an **AggregateError**

**Promise.any()** will throw an **AggregateError** if all the promises were rejected.

### 4. String.prototype.replaceAll

The `replaceAll()` method gives developers a straightforward way of replacing a substring in a string that occurs once or more.

Unlike the `String.replace()` method that replaces the only first substring it finds in the string. 


```js
let str = 'music is life, music feeds the soul';

str.replaceAll('music', 'food');

console.log(str); // 'food is life, food feeds the soul'

```

### Conclusion

To get started using ES2021 features in your code, set up your project with Babel compiler, the packages have already been included in `@babel/preset-env`


> [A link to setting up a Babel in your project](https://babeljs.io/setup#installation)

Discuss on [Medium](https://agirlcodes.medium.com/4-new-es2021-es12-features-javascript-developers-need-to-know-54964dc1a49d)

*Recommended Reads*

- [My Most used git commands](https://www.agirl.codes/my-most-used-git-commands).

- [How to check if an object is empty](https://www.agirl.codes/my-most-used-git-commands).

In this article, I will be sharing 6 different javascript methods you can use to check if an object is empty or not

How to Check if an Object is Empty in JavaScript



In this article, I will be sharing 6 different JavaScript methods you can use to check  if an object is empty or not.

Let's start with creating an empty object using literal syntax.

```jsx
const myObject = {}
```

### 1. Object.entries()

This method returns an array containing the [key, value] pairs found in the object passed in as an argument.
To check if an object is empty, check if the length of the array is 0.

```jsx
Object.entries(myObject).length === 0;
// 0

return Object.entries(myObject).length === 0 ? true: false
// true
```

### 2. Object.keys()

This method returns an array of strings that contains enumerable properties of the object passed as an argument. It returns an array of *[ keys ]*

```jsx
Object.keys(myObject).length === 0;
// 0

return Object.keys(myObject).length === 0 ? true: false
// true
```

You can also create an isEmpty function and pass in the object as a parameter

```jsx
function isEmpty (myObject) {

return Object.keys(myObject).length === 0 ? true: false

}

isEmpty(myObject); // true
```

### 3. Object.getOwnPropertyNames()

It returns an array of strings that corresponds to the properties found in the object passed as an argument. This method calls GetOwnPropertyKeys under the hood.

```jsx
 Object.getOwnPropertyNames(myObject).length === 0;
// 0

if(Object.getOwnPropertyNames(myObject).length === 0) { // return something};
```

### 4. !myObject.key

It checks if the `[key]` is present in `myObject`. Use this when you know the properties that the object is supposed to have.

```jsx
let result = '';

my.object.id // undefined

if (!myObject.id) result = 'object is empty'

console.log(result) // object is empty
```

Note: this won't work `myObject[id]`, JavaScript will throw an error.

### Using a JavaScript Library

### 5. UnderScore.js

[_.isEmpty(collection)](https://underscorejs.org/#isEmpty) Returns true if **collection** has no elements. For strings and array-like objects _.isEmpty checks if the length property is 0.

```jsx
_.isEmpty([1, 2, 3]);

=> false

_.isEmpty({});

=> true
```

### 6. Lodash.Js

[_.isEmpty()](https://lodash.com/docs/#isEmpty) Method Checks if the value is an empty object, collection, map, or set. Objects are considered empty if they have no own enumerable string keyed properties.

```jsx
_.isEmpty({ 'a': 1 });
// => false

_.isEmpty(myObject)
// true
```

Discuss on [Medium](https://agirlcodes.medium.com/how-to-check-if-an-object-is-empty-in-javascript-1916f041c49c)

*Recommended Reads*

- [My Most used git commands](https://www.agirl.codes/my-most-used-git-commands).

- [4 New ES2021(ES12) Features JavaScript Developers Need to Know'](https://www.agirl.codes/4-new-es2021(es12)-features-javascript-developers-need-to-know).

In this article, I will show you how to use React Hook to build forms with multiple input fields.

How to Build Forms with Multiple Input Fields using React Hooks


Forms can be considered as the backbone of web applications. How would you get any information from your users without forms? Yes, there are libraries available to easily build forms now ( a nice one is Formik) but having an understanding of how to create forms in React from scratch is beneficial, It's pretty easy.

### Controlled and Uncontrolled Input

The default action for an HTML form is to have the page refreshed which causes you to lose all your data. With React, we use javascript to handle the way we get access to the data entered by the users.

In HTML, form types such as `<input> <textarea>` generally handle their own state and update based on user input. letting the DOM handle user input for you is referred to as `uncontrolled input`.

`Controlled input` is letting React handle the state for you as it is mutable. React stores this state in the state property, and can only be updated using solid-state. Hence, the React component that renders the form is now in control of what happens to that form on subsequent user input.

for more information on controlled Input → [check here](https://reactjs.org/docs/forms.html)

### Handling Multiple Input Fields in a Form with useState

In most scenarios, we will be needing more than one input field from users. To demonstrate this, let's create a registration form.

```jsx
import React, { useState } from "react";

export default function Register() {
  const [user, setUser] = useState({ fullname: "", email: "", password: "" });

  const handleChange = (event) => {
    setUser({ ...user, [event.target.name]: event.target.value });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fullname">Full Name</label>
      <input type="text" name="fullname" onChange={handleChange} />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" onChange={handleChange} />
      <label htmlFor="password">Passoword</label>
      <input type="password" name="password" onChange={handleChange} />
      <button>Register</button>
    </form>
  );
}
```

let's start from the top

*state* → here we are declaring the state using *useState hook*, user represents the object we inserted into *useState*, *setUser* is going to be used to update the state. if you are to familiar with  React classes

```jsx
 const [user, setUser] = useState({ fullname: "", email: "", password: "" });
```

```jsx

this.state = {
  user: {
    fullname: "",
    email: "",
    password: ""
  }
}; // setting state using react classes
```

*handleChange →* in our handleChange function, we use *setUser* to update the `user` state. I am spreading the `user` object in *setUser*, if you don't do this, *setUser* is only going update the last property which is the `password` so we have to preserve the other properties state by adding them.

we use `e[event.target.name]:event.target.value` to tell *setUser* function what property to update based on the name.

The `user` data which is now stored in state can be passed down to different components as needed.

> event.preventdefault() is to prevent the page from re-rending

### Accessibility is Very Important

Because of its common usage, it is paramount to make sure your forms are easy to understand and interact with by all users. not paying attention to accessibility reduces the  chances of having users with disabilities interacting with your site form. Little changes can make a lot of difference;

In our form, we used best practice and added accessibly by;

- including labels for each input field to describe the purpose of the form control

To dig deeper into how to make your site accessible, read more on [w3.org](https://www.w3.org/WAI/tutorials/forms/)

### Make Sure to Validate User Input

Validation should never be skipped because you should never trust that the user would input the right information. Options are using the inbuilt HTML validation, writing one yourself or using a validation schema. Any option works fine, I recommend using a validation schema like Yup as it makes writing validation for input fields easy. Here's a Medium link to an article explaining why you need it and how to use it for form validation.
> [Introduction to Yup Object Validation In React](https://medium.com/@rossbulat/introduction-to-yup-object-validation-in-react-9863af93dc0e)

Now that you understand how forms are built with React Hooks, you can choose to either build forms using a form helper or using React hooks.

> The code for the Signup form can be found here [codesandbox.io](https://codesandbox.io/s/how-to-build-forms-with-multiple-input-fields-using-react-hooks-2c7dt?file=/src/styles.css)


For a more in-depth beginner guide on how to build forms with multiple input fields -  [The Complete Guide to Building React Forms with useState Hook](https://www.agirl.codes/complete-guide-build-react-forms-with-usestate-hook)

Discuss on [Medium](https://medium.com/nerd-for-tech/how-to-build-forms-with-multiple-input-fields-using-react-hooks-677da2b851aa)

*Recommended Reads*

- [The Complete Guide to Building React Forms with useState Hook.](https://www.agirl.codes/complete-guide-build-react-forms-with-usestate-hook)

- [How to sort next js blog posts by most recent post date.](https://www.agirl.codes/sort-nextjs-blog-posts-by-date)

- [Find out how I solved this Jest storybook react test error.](https://www.agirl.codes/storybook-test-error-cannot-find-interopRequireDefaultjs)

- [Setup a Newsletter with Next.js and Mailchimp](https://www.agirl.codes/setup-newsletter-mailchimp-nextjs).

- [My Most used git commands](https://www.agirl.codes/my-most-used-git-commands).
