DEV Community: Debora Galeano

How to handle multiple inputs in React

Debora Galeano — Sun, 29 Nov 2020 23:06:49 +0000

I recently had to refactor a React Form when working with multiple inputs and I thought I'd share how I did it.

This is how my form looks like:

The Problem

Look at the starter code below
This Form component has 5 input fields in total; 5 different states and 5 different onChange inline functions
This is not exactly DRY code 🙀



import React, { useState } from "react";

export default function Form() {
  const [newCompany, setCompany] = useState("");
  const [newPosition, setPosition] = useState("");
  const [newLink, setNewLink] = useState("");
  const [newDate, setNewDate] = useState("");
  const [newNote, setNewNote] = useState("");

  return (
        <form>
          <input
            value={newCompany}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
          <input
            value={newPosition}
            onChange={(e) => setPosition(e.target.value)}
            label="Job Title"
          />
          <input
            value={newLink}
            onChange={(e) => setNewLink(e.target.value)}
            label="Job Link"
          />
          <input
            type="date"
            value={newDate}
            onChange={(e) => setNewDate(e.target.value)}
          />
          <input
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            label="Note"
          />
          <button type="submit"> Submit </button>
        </form>
  );
}

Also, if I want to add a reset function later, my code will look like this: 🙅🏽‍♀️



  const reset = () => {
    setCompany("");
    setPosition("");
    setNewLink("");
    setNewDate("");
    setNewNote("");
  };

The Solution: Refactoring ✨

Step 1: Add input default values and initialize state

First, let's add default values to ALL input fields
How do we do that? We create an object literal with those values and set to empty string
Then, with the useState() React Hook we initialize our values state with the initialValues object
Important: Remember to add the value attribute to every input field with its corresponding value (e.g. values={values.company})



const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  return (
        <form>
          <input
            value={values.company}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
 //...

Step 2: Handle multiple input change

The goal here is to handle ALL inputs with a single onChange handler
In order to update and keep track of our input fields every time they change, we need to create a handleInputChange function (see below)
What's happening here? (quick recap)
- First, we're using object destructuring to get or extract the name and the value attributes from our inputs (look at the the comments below - they're equivalent)
- Then, we're updating our values state object with the existing values by using the setValues() function and the spread operator
- And finally, we're updating the value of the event that was triggered by that onChange with this ES6 syntax: [name]: value
- This is a very important step! We need to add a name attribute to our inputs and [name]: value here means that we're setting a dynamic name property key (taken from our inputs - e.g. company: e.target.value) which will be equal to the value of our current input state.

Reference: React Docs



 //... 

  const handleInputChange = (e) => {
    //const name = e.target.name 
    //const value = e.target.value 
    const { name, value } = e.target;

    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company" //IMPORTANT 
            label="Company"
          />
   // ...

Step 3: Add `handleInputChange` to input fields

Add the handleInputChange function to the onChange prop of every input field
Look at the final code; this is a much cleaner and manageable form 👌🏽



import React, { useState } from "react";

const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company"
            label="Company"
          />
          <input
            value={values.position}
            onChange={handleInputChange}
            name="position"
            label="Job Title"
          />
           // ... Rest of the input fields
          <button type="submit"> Submit </button>
        </form>
  );
}

I hope it was useful. All comments and feedback are welcome! 🎊

How to add a Netlify Contact Form in React

Debora Galeano — Thu, 19 Nov 2020 18:46:07 +0000

I recently created a contact form for my portfolio website using Netlify and it took me some time to set it up. I wrote this post to help other poor souls out there trying to do the same.

Here's how it looks:

Note: I used these two extremely helpful articles to guide me through: this one and this.

Step 1: Add the form with Netlify attributes

Create a simple contact form (I used Material-UI here)
IMPORTANT: Add Netlify built-in features to process form submissions. Look at name, method and data-netlify attributes inside the form element
Also, Netlify recommends adding a hidden input inside the form. The important attribute here is value, which should be the same as the form’s name: contact.

<Container maxWidth='sm'>
 <h2>CONTACT</h2>
   <Card>
     <form 
       name="contact" 
       method="POST" 
       data-netlify="true" 
      >
     <input type="hidden" name="form-name" value="contact" />
        <TextField id="standard-basic" label="name" name="name" />
        <TextField id="standard-basic" label="email" name="email" />
        <TextField multiline id="standard-basic" label="message" name="message" />
        <Button type="submit">Send</Button>
       </form>
      </Card>
   </Container>

Step 2: Add another form to your `index.html` file

Netlify recommends adding the following block of code to your index.html file, right after the opening <body> tag in order to allow Netlify to process the form.
The action attribute here would be used for redirecting. More on this on the next step.

<!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify netlify-honeypot="bot-field" action='/' hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

Step 3: Add a success message and avoid redirecting

What's the goal here? To help people stay on your website.
Add the following code, including useEffect and useState as well as the message under the <h2> tag
IMPORTANT: Make sure that the action attribute inside the form element takes the user to the right path. In my case it's "/contact/?success=true" contact here is my route and the name of my component.

Note: most of this code was taken from one of the articles I mentioned in the introduction.

//Final code 
export default function Contact() {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if ( window.location.search.includes('success=true') ) {
      setSuccess(true);
    }
  }, []);

  return (
    <Container maxWidth="sm">
      <h2>CONTACT</h2>
      {success && (
          <p style={{ color: "green" }}>Thanks for your message! </p>
        )}
      <Card>
        <form 
            name="contact" 
            method="POST" 
            action="/contact/?success=true"
            data-netlify="true" 
            >
        <input type="hidden" name="form-name" value="contact" />
          <TextField id="standard-basic" label="name" name="name" /> <br />
          <TextField id="standard-basic" label="email" name="email" /> <br />
          <TextField
            multiline
            id="standard-multiline-static"
            label="message"
            name="message"
          />
          <br />
          <div>
            <Button type="submit">Send</Button>
          </div>
        </form>
      </Card>
    </Container>
  );
}

Step 4: Finally, check your form submissions

Assuming that you've already deployed your site, check your form submissions on your Netlify project dashboard
It should look something like this:

That's it. Hopefully it worked as expected. If not, just let me know and we'll find a way 😉

How to add a Search Bar in React

Debora Galeano — Sat, 07 Nov 2020 16:56:26 +0000

This post will cover the following:

Simple steps on how to add a search bar in React
We'll use useState for managing the input text field
Filtering methods: filter and includes

Example:

Step 1: Add input tag

Add an input tag in the render area of your component. Attribute type should be set to text.
Now in order to set its value and add an onChange that will handle the value of our input, which is search in this case, we need to use useState
The onChange={(e) => setSearch(e.target.value)} will set the search every time it changes
Now our input value is managed by our state!
Next we'll see how we can filter our contacts array

export default function Search() {
    const [search, setSearch] = useState('')

    return (
        <div>
            <h3 className="title">CONTACTS LIST</h3>
                <input 
                    type="text" 
                    placeholder="Search name" 
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    />
            //a contacts array passed down to List 
            <List contacts={contacts/>
        </div>
    )

`List.js` component

export default function List({contacts}) {
    return (
        <div>  
            <ul>
            {contacts.map(contact => (
                <li key={contact.id}>
                    Name:
                       <span>{contact.full_name}</span>
                    Phone: 
                       <span>{contact.tel}</span>
                </li>   
            ))}
            </ul>
        </div>
    )
}

Step 2: Adding the search functionality!

This is what we're telling filteredContacts to do:

If we haven't searched for anything yet, please just show the contacts list
If not, please filter the contacts array and check that every contact's full name includes in the search field that we're looking for
And, if we type in lowercase, please don't mind it so much and still show us the results :)

const filteredContacts = search.length === 0 ? contacts
: contacts.filter(contact =>                         
 contact.full_name.toLowerCase().includes(search.toLowerCase()))

Step 3: Rendering and final code

In order to render the contacts that we're looking for, we now pass down the filteredContacts to the List component (see below)
This is the entire code for the Search component

Note: For the fake data, I'm using a Mockaroo API, as well as axios inside useEffect.

import React, {useState, useEffect} from 'react';
import axios from 'axios'; 
import List from './List'; 

export default function Search() {
    const [contacts, setContacts] = useState([])
    const [search, setSearch] = useState('')

    useEffect(() => {
        const API_URL = 'https://my.api.mockaroo.com/phonebook.json?key=9ac1c5f0'
        axios
            .get(API_URL)
            .then(res => {
                const contacts = res.data
                setContacts(contacts)
            })
    }, [])

    const filteredContacts = search.length === 0 ? contacts : 
    contacts.filter(contact => contact.full_name.
                toLowerCase().includes(search.toLowerCase()))

    return (
        <div>
            <h3>CONTACTS LIST</h3>
                <input 
                    type="text" 
                    placeholder="Search name" 
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    />
            <List contacts={filteredContacts}/>
        </div>
    )
}

Hope it was useful!

Note: my posts are inspired by what I'm learning at The Collab Lab ☺️

How to use React Router

Debora Galeano — Sat, 31 Oct 2020 20:07:52 +0000

In this post, I will show you how to include React Router in your react project.

It's easy to use and it's great for improving the navigation experience.👌🏽

Here's a demo of a simple navbar (and the button in the About page that redirects back to Home):

Now let's see how to get started with React Router.

Installation

Install react-router-dom
Note: Make sure that you're already working on a create-react-app before adding it to your project

npm install react-router-dom

Include the Router

Wrap your <App /> component with <BrowserRouter />
Add each <Route /> with its path and respective component
Wrap <Switch /> around your routes. Switch will start looking for a matching route and the exact attribute will make sure that it matches exactly what we want

The <Navbar /> component will take care of the <NavLink />, more on this below.

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import About from './About';
import Home from './Home'; 
import Navbar from './Navbar'; 

function App() {
  return (
      <BrowserRouter>
        <Navbar /> 

        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/about" component={About}/>
        </Switch>

      </BrowserRouter>
  );
}

export default App;

Add NavLink

<NavLink /> will act as each Navbar link, which is using client-side routing (exclusive of single-page applications)
<NavLink /> comes with the activeClassName property, which will allow us to add CSS to active/non-active links

import React from 'react';
import {NavLink} from 'react-router-dom'
import './App.css'; 

export default function Navbar() {
    return (
        <div>
            <NavLink 
                activeClassName="selected"
                className="not-selected"
                to="/"
                exact
                >HOME</NavLink>
            <NavLink 
                to="/about"
                activeClassName="selected"
                className="not-selected"
                exact
                >ABOUT
            </NavLink>
        </div>
    )
}

The `useHistory` hook

What does it do? It provides access to the history prop that you may use to navigate
In other words, useHistory can be used for redirecting which is very convenient!

import React from 'react'; 
import {useHistory} from 'react-router-dom'; 

export default function About() {
    const history = useHistory()

    const handleClick = () => {
        history.push('/')
    }

    return (
        <div>
            <h1>ABOUT</h1>
            <p>THIS IS THE ABOUT PAGE</p>
            <div>
                <button 
                    onClick={handleClick}>
                    Back to Home
                </button>
            </div>
        </div>
    )
}

And that's it! 😬