DEV Community: David Bell

Make an accessible search bar in React

David Bell — Mon, 03 May 2021 06:11:47 +0000

Make an accessible search bar in React

This post is going to explain how to take a basic search input and make it accessible to everyone.

Let's begin

I have began by creating a simple app. It contains a header with a search input and navigation links. In the main of the app all the shopping items are displayed. You can search for items in the search input and items that contain the character you searched for are displayed.

import { useState } from 'react';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [term, setTerm] = useState('');
  const [searchedResult, setSearchedResult] = useState('');

  const items = [
    { name: 'apple' },
    { name: 'banana' },
    { name: 'pear' },
    { name: 'apple tango' },
    { name: 'mango' },
    { name: 'banana milkshake' },
  ];

  const handleSubmit = e => {
    e.preventDefault();
    setSearchedResult(term);
    setTerm('');
  };

  const handleChange = e => {
    setTerm(e.target.value);
  };

  const filteredItems = items.filter(item =>
    item.name.toLocaleLowerCase().includes(searchedResult.toLocaleLowerCase())
  );

  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <div>
          <a href='/'>LOGO</a>
        </div>
        <form className={styles.search} onSubmit={handleSubmit}>
          <input
            type='text'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
          />
          <button type='submit' onClick={handleSubmit}>
            Search
          </button>
        </form>
        <nav className={styles.nav}>
          <div>
            <a href='/'>About</a>
          </div>
          <div>
            <a href='/'>Contact</a>
          </div>
        </nav>
      </header>
      <main className={styles.main}>
        <h3>Items</h3>
        {filteredItems && (
          <ul>
            {filteredItems.map(item => (
              <li key={item.name}>{item.name}</li>
            ))}
          </ul>
        )}
      </main>
    </div>
  );
}

This app works but it's not accessible. Which means it is no good. This app should be accessible to everyone and anyone.

Making the search functionality accessible

First we can add a role of search to the form. This will help assistive technology to inform the user that there is a search option. Screen readers will be given the option to navigate to this section.

Search role

<form role='search' className={styles.search} onSubmit={handleSubmit}>

Type search

Modern browsers support an input type of "search". This works just like type="text" but with added benefits. It helps with autocomplete options which is useful for users with dyslexia to avoid spelling mistakes when they need to use this option.

Changes to make:

  <input
        type='search'
        id='search'
        name='search'
        onChange={handleChange}
        value={term || ''}
        placeholder='search'
          />

Labelling

For user controlled elements like the search input we have, needs a <label>. Screen readers will read this label out to the user.

   <label htmlFor='search'>Search:</label>
          <input
            type='search'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
          />

The above code will display the label in the browser and be visible. Sometimes you might not want the label to be visible though. You must include a label but you can hide it using CSS but you must include the htmlFor attribute.

<label htmlFor='search' className='visualy-hidden'>Search:</label>
  <input
    type='search'
    id='search'
    name='search'
    onChange={handleChange}
    value={term || ''}
    placeholder='search'
      />

You can add an aria-label direct to the input if you do not wish to use a label element. This will be read out by screen readers.

 <label htmlFor='search'>Search:</label>
          <input
            aria-label='Enter your search term'
            type='search'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
          />

An additional step would be to app a title to the input.

 <label htmlFor='search'>Search:</label>
          <input
            title='search for food'
            aria-label='Enter your search term'
            type='search'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
          />

If you're interested diving deeper this article here goes deeper.

Validation

Our form needs validation to alert the user if there is any issues.

First we can add a required field to make help make sure the search functions has been typed in.

 <label htmlFor='search'>Search:</label>
          <input
            title='search for food'
            aria-label='Enter your search term'
            type='search'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
            required
          />

We can also add error handling of our own. You can hide this with CSS.

I'm going to use error state and display a span containing the error message.

const [error, setError] = useState(null);

const handleSubmit = e => {
    e.preventDefault();
    setSearchedResult(term);
    setTerm('');
    if (filteredItems.length === 0) {
      setError('No items matching your search please be more specific');
    }
  };

// className can be used to hide this
  <span className='errMsg' role='status'>
  {error}
  </span>

Heres the code so far:

export default function Home() {
  const [term, setTerm] = useState('');
  const [searchedResult, setSearchedResult] = useState('');
  const [error, setError] = useState(null);

  const items = [
    { name: 'apple' },
    { name: 'banana' },
    { name: 'pear' },
    { name: 'apple tango' },
    { name: 'mango' },
    { name: 'banana milkshake' },
  ];

  const handleSubmit = e => {
    e.preventDefault();
    setSearchedResult(term);
    setTerm('');
    if (filteredItems.length === 0) {
      setError('No items matching your search please be more specific');
    }
  };

  const handleChange = e => {
    setTerm(e.target.value);
  };

  const filteredItems = items.filter(item =>
    item.name.toLocaleLowerCase().includes(searchedResult.toLocaleLowerCase())
  );

  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <div>
          <a href='/'>LOGO</a>
        </div>
        <form role='search' className={styles.search} onSubmit={handleSubmit}>
          <label htmlFor='search'>Search:</label>
          <input
            title='search for food'
            aria-label='Enter your search term'
            type='search'
            id='search'
            name='search'
            onChange={handleChange}
            value={term || ''}
            placeholder='search'
            required
          />

          <button type='submit' onClick={handleSubmit}>
            Search
          </button>
        </form>
        <nav className={styles.nav}>
          <div>
            <a href='/'>About</a>
          </div>
          <div>
            <a href='/'>Contact</a>
          </div>
        </nav>
      </header>
      <main className={styles.main}>
        <h3>Items</h3>
        <span className='errMsg' role='status'>
          {error}
        </span>
        {filteredItems && (
          <ul>
            {filteredItems.map(item => (
              <li key={item.name}>{item.name}</li>
            ))}
          </ul>
        )}
      </main>
    </div>
  );
}

Our forms looking good. There is more we can do regarding error messages etc but this is just to give a good idea and to start thinking about it.

Useful links to read more.

Summary

To summarise you need to realise that there is users that have different requirements to yourself. You need to ensure that they are aware of all useful content within your web page.

🚨 Attention! 🚨

If you know something that could be added to this article please comment. Improving site accessibility as a web dev community is for the greater good.

My online portfolio

David Bell — Mon, 16 Nov 2020 04:52:44 +0000

I have decided that it is the time to try and get my first Web developer job. In order to achieve this I felt a snazzy new portfolio site was needed.

You can see the site if your'e interested.

Built with

For my stack I went with what i've been enjoying.

Nextjs(React) - I enjoy using nextjs to build React applications. The option for having static or server-side pages is great
TailwindCSS - My current favourite way to style things. It saves me time writing styles, whilst keeping my CSS brain going. It's a delight to use.
Framer Motion - I chose this because it's easy to turn a dull web page into something spicy.
Markdown pages - I chose to add my project pages from Markdown. When I do a project I write a short summary about it in the README file on Github. I thought it would be nice to use my project summary readme as a page on my portfolio.

Portfolio Purpose

I wanted a clean looking no nonsense website. The sole purpose is employment opportunities and to share my recent code projects.

A minimal design with project briefs and contact information was all I needed.

I will add to the portfolio as I go but for the moment it's fine for my CV.

How to learn web development

David Bell — Wed, 04 Nov 2020 09:01:37 +0000

First let me start with a disclaimer. I started my web development journey roughly 14 months ago as of writing this article. I am very much still learning every single day and feel like web development is a lifelong pursuit. In this article I will give my thoughts on what courses to take, what I wish knew and what mistakes I made.

p.s - I am not affiliated with any of the following.

What is Web Development

Web development as a basic explanation is creating things people look at on the web. Websites, apps etc. Also known as Frontend Development. Web Development involves making things look nice and displaying information for people.

Part One: Web basics and Learning How to Learn

For the first month learn more about the web, computers and just as important, how to learn efficiently. After this make websites and make them look snazzy.

Learn about the 80/20 rule and watch this video on active recall or even better take this course How to Study for Exams - An Evidence-Based Masterclass - get this for free by looking for code on youtube. In fact anything from Ali Abdaal about learning is usually top notch.
Watch CS50 don't get attached to the computer languages used it's the principles you want to become familiar with. The guy does a great job at engaging you. I was amazed how I would watch Computer Science lectures from Harvard university whilst living on a Navy base in Scotland. For free!
This payed monthly course path from Scrimba is incredible. I wish this existed when I started. If you can, do this course path whilst also looking at the other courses in this article. Not affiliated in anyway just a high recommendation.
This free bootcamp by Colt is great for getting your feet wet
Another great intro to HTML and CSS by Netninja. You'll get familiar with this guy.
Important - Using what you have learned from the last course go and build something yourself. This is important as it uses active recall for solidifying the knowledge in your mind. It doesn't matter what you make. Just pick a business or famous person and make a website. Use other website designs as inspiration.
Learn modern responsive CSS with another course from the Netninja's Mobile first responsive build course.
Play these games - Flexbox froggy and Grid garden. These may seem daft however they give you a perfect opportunity to actively recall what you have learned.
Build another project with skills in the courses above. If you don't remember everything it's ok nobody does. Part of web development is referring to google, courses and docs etc to solve problems.
Use Tailwindcss for styling websites quickly. I like TailwindCSS as you use the same principles as in CSS. You just use pre defined classes rather than thinking of your own. In fact my CSS actually improved once I started using Tailwind.
Sign up for Stackoverflow it's a place where you can ask questions your'e stuck on and search for other asked questions.
Learn Git. This way you can upload your projects.

The main thing to take from this section is, you need to learn effectively. The way you do this is watching/reading something then actively recalling that information yourself in your own projects. No matter how many tutorials you watch you will not retain that information. You can't be an artist by watching Bob Ross. This section could take 1-2 months. Take your time.

Part Two: JavaScript

Add some interactivity to your websites with JavaScript. This part is a little trickier but you'll get the hang of it with discipline. JavaScript allows you to add interactivity to websites. For example the like button on social media or opening sidebar menus on clicking.

Free tutorial by Colt Steele
Heres a payed course by Netninja on udemy. Wait for it to be discounted cheap. Udemy discounts all courses every week to around £10.00/$10.00.
Dabble online for free youtube videos or head to Free Code Camp. Get programming muscles going. It's a different way to think.
Heres a great expensive but worth it course by Wes Bos
If you want to delve deeper into JavaScript and understand it more in theory try this course JavaScript the Hard Parts. Yes a months membership is expensive. For this course alone it was worth it. Will is very engaging and likeable. After this course everything seemed to click.

Once again I encourage you to build little websites and projects yourself. Use active recall by building from what you're taught in tutorials or write articles from your notes using the Feynman technique and post them on Dev. Have fun. Take breaks. Take your time on this one.

Part Three: Learn React

React is a front end framework which allows you to write your code in a more efficient way. React is popular and there is lot's of resources out there. There is other front end frameworks like Vue, however I can only recommend what I have experience with.

First make sure you understand these. I didn't and moved to fast and wasted a lot of time and ended up going back to fundamental JavaScript.
Another crash course from Colt Steele
Another belting course from the Netninja
Read the React docs they are actually good.
This free massive tutorial by Karl. Still can't believe he made this for free. Take your time with it and build your own projects along side.
Explore Nextjs. I love nextjs and wish I used it earlier. You just use React as normal but nextjs super powers your apps by making them fast, does routing for you and even improves SEO. Theres no reason I can see for not using nextjs when you've got the basics down.

Part 4: Build Things and Learn Yourself

This is the most important part. Build things. Lot's of things and learn how to do stuff yourself.

Copy websites
Create silly apps
Ask questions

Other Great Resources

Theres plenty of other people not mentioned above but provide a great top notch content

James Q Quick for JavaScript, React and Server-less
Ania Kubów for cool JavaScript games
Kevin Powell for CSS wizardry
Florin Pop for CSS and JavaScript and who's content creation endurance is out of this world
Syntax FM - Podcast with Scott and Wes is great. They are entertaining and educational.

Theres many more and the web development community is great.

Don't Make The Same Mistakes I Did

I made a tonne of mistakes on my journey. I want to be open so others don't fall into the same traps I did. Don't think watching a million tutorials will make you learn. Heres rules I should of followed.

Tutorial hell - No matter how many tutorials you watch. It won't make you learn. Watch a tutorial then build something using the tutorial knowledge.
Cramming hours of study doesn't work - It's bette to learn in smaller groups of focussed effort than a long slog of study. You learn better by breaking things. I would spend hours and hours watching tutorials. Yet the information doesn't sink in.
Use the Pomodoro Technique - Start a timer for 25 minutes and study. After 25 minutes take a 5 minute break. Rinse and repeat.
Go outside - Take a walk in the morning or night and get outside.
Sleep - Important. Get 8 hours sleep a night. Don't set your alarm for 5am to study like I did with only 4-5 hours sleep. It doesn't work. Theres an overwhelming amount science that supports this.
Exercise - Yes exercise. I'm not saying you have to start being a gym bro or chick who loves to talk about protein and biceps. Just exercise for 30 minutes 3-5 times a week. It's good for your back if anything.
Learn the basics of design - I wish I learned a bit more about design principles. Or learn a tool like Figma so I would have an idea of what I was going to make before I began to code.

Conclusion

Enjoy the process! This is an interesting skill to learn.

Add resources in the comments

If you know any other useful resources I have not included, please put them in the comments.

Strapi vs Sanity as a CMS

David Bell — Sat, 24 Oct 2020 01:26:31 +0000

I would like a headless CMS for a site I will build with nextjs.

The site will be small, so I want something cheap and easy to get up and running.

What do you all think?

A Quick Look at the sort() Array Method in JavaScript

David Bell — Wed, 21 Oct 2020 11:34:02 +0000

 (╯°□°)╯ .sort()

The Array method sort() is handy for ordering Arrays and Objects.

Simple use

For simple use you can just call sort() on an array.

Let’s say we have an array of numbers that we want sorting from low too high.

const nums = [5, 2, 1, 3, 4]

const numOrder = nums.sort()
// [1,2,3,4,5]

Or is you have an array of strings we want sorting alphabetically.

const phonetics = ["zulu", "foxtrot", "charlie", "alpha"]
const orderPhonetics = phonetics.sort()
// [ 'alpha', 'charlie', 'foxtrot', 'zulu' ]

Sorting Values from Objects

We have an object of dogs:

const dogs = [
  { name: "bob", age: 3 },
  { name: "winston", age: 10 },
  { name: "spike", age: 5 },
]

Let’s say we want to sort the dogs by youngest to oldest:

const ageOrder = dogs.sort((a, b) => {
  if (a.name > b.name) {
     return 1;
  }

  if (a.name < b.name) {
    return -1;
  }
  return 0;
})

/* [ { name: 'bob', age: 3 },
     { name: 'spike', age: 5 },
     { name: 'winston', age: 10 } ]*/

We pass in two arguments to sort() and using a ternerary operator we bubble sort the dogs by age. “Is a.age greater than b.age? If it is +1. If it is lower -1”.

Works the same when sorting alphabetically:

const alphaOrder = dogs.sort((a,b) => {
  if (a.name > b.name) {
    return 1
  }
  if (a.name < b.name) {
    return -1
  }
  return 0
})
/* [ { name: 'bob', age: 3 },
     { name: 'spike', age: 5 },
     { name: 'winston', age: 10 } ] */

Let's connect

Twitter

Using React Hooks and async/await to make a Covid-19 Virus Tracker

David Bell — Wed, 21 Oct 2020 11:33:51 +0000

Let's build a Corona virus Tracker app with React. We will be using this free API Corona Stats that @mathdroid has kindly made for us.

This will be a basic code along style article.

File cleanup

In create react app clean up the files you don't need. Then create a a DisplayContainer component and import it into App. Or do your prefered way of filing.

import React from "react"

function App() {
  return <div>Hello World</div>
}

export default App

Display Container

import React from "react"

const DisplayContainer = () => {
  return <div>DISPLAY CONTAINER</div>
}

export default DisplayContainer

import DisplayContainer from "./components/DisplayContainer"

function App() {
  return (
    <div>
      <DisplayContainer />
    </div>
  )
}

Fetching the data

We are going to use Reacts useState and useEffect hooks.

useState allows you to add state to a functional component in React
useEffect is used for when you want something to happen when the page is rendered or a change is made.

Start by importing useState and useEffect from React. Then create the state to use. We want loading, error and stats state as these are the things we want to manage.

const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const [stats, setStats] = useState([])

Our function will be an async/await function. I'm going to use a try/catch/finally block for this. I find it's nice and easy to visualise like this.

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

const DisplayContainer = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [stats, setStats] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {

      } catch (error) {

      } finally {

      }
    }
  })

We have our state and layout laid out let's add the rest.

Fetching data and set state

try - we need to get the data from our end point using fetch. Then convert the data to JSON for us to use. Next set the state with this JSON data.

try {
  const response = await fetch("https://covid19.mathdro.id/api")
  const data = await response.json()
  setStats(data)
}

catch - In our catch block we set the error state. If there is an error that is.

 } catch (error) {
        setError(error);
 }

finally - The last thing we want this function to do is set the loading state to false.

finally {
        setLoading(false);
  }

The full data fetching function looks like this.

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch("https://covid19.mathdro.id/api")
      const data = await response.json()
      setStats(data)
    } catch (error) {
      setError(error)
    } finally {
      setLoading(false)
    }
  }
  setLoading(true)
  fetchData()
}, [])

Notice at the end of useEffect there is an empty array []. This is where dependencies go to perform this function again. You must add an empty array for this else you will encounter the dreaded infinite loop.

Now check the state in your React dev tools to see if it has worked successfully. We want the confirmed, recovered and deaths stats from the api.

Displaying the data

If you checked the state in the dev tools you'll see our state is an object with objects.

Now if you try to display the stats like this stats.confirmed.value you will get an error TypeError: stats.confirmed is undefined. This is because you are trying to display something that doesn't exist yet. You must first check if it exists. This is done with a simple ternary operator.

ternary operator - "If this is true, do this, if not do this instead."

return (
  <div style={{ textAlign: `center` }}>
    <h2>Confirmed:</h2>
    <span>
      {stats.confirmed ? stats.confirmed.value : "Sorry not available"}
    </span>
    <h2>Deaths:</h2>
    <span>{stats.deaths ? stats.deaths.value : "Sorry not available"}</span>
    <h2>Recovered:</h2>
    <span>
      {stats.recovered ? stats.recovered.value : "Sorry not available"}
    </span>
  </div>
)

Finish

There we have the Corona virus stats displayed.

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

const DisplayContainer = () => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [stats, setStats] = useState({})

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://covid19.mathdro.id/api")
        const data = await response.json()
        setStats(data)
      } catch (error) {
        setError(error)
      } finally {
        setLoading(false)
      }
    }
    setLoading(true)
    fetchData()
  }, [])


  return (
    <div style={{ textAlign: `center` }}>
      <h2>Confirmed:</h2>
      <span>
        {stats.confirmed ? stats.confirmed.value.toLocaleString() : null}
      </span>
      <h2>Deaths:</h2>
      <span>{stats.deaths ? stats.deaths.value.toLocaleString() : null}</span>
      <h2>Recovered:</h2>
      <span>
        {stats.recovered ? stats.recovered.value.toLocaleString() : null}
      </span>
    </div>
  )
}

export default DisplayContainer

I have used .toLocaleString() to format the numbers. Now it just needs some CSS.

Let's connect

Twitter

A Quick Look at the map() Method in JavaScript

David Bell — Wed, 21 Oct 2020 11:33:31 +0000

The map() array method in JavaScript manipulates an array and returns a new array with the altered data.

Example 1

Let's say we have an array of objects called dogs

const dogs = [
  {
    name: "Scruffy",
    breed: "Labrador",
    age: 3,
    likes: ["being a good boi", "walks"],
  },
  {
    name: "Shandy",
    breed: "Bulldog",
    likes: ["sticks", "treats"],
  },
]

Let's say we want a new array from dogs showing just the dog breeds available.

const breeds = dogs.map(dog => dog.breed)
// [ 'Labrador', 'Bulldog' ]

We map over dogs and for each dogs available we add the breed to our new array.

Example 2

In this example we want to return a new array of objects, of each dogs name and what the dogs likes.

const nameAndLikes = dogs.map(dog => {
  return {
    name: dog.name,
    likes: dog.likes,
  }
})
/*[ 
    { 
    name: 'Scruffy', 
    likes: [ 'being a good boi', 'walks' ] 
    },
    { name: 'Shandy',
     likes: [ 'sticks', 'treats' ] 
     }
  ] */

This time we set the keys we want and then set the values to dog.name and dog.likes. Remember this returns a new array and doesn't alter the original.

Let's connect

Twitter

A Quick Look at the find() Method in JavaScript

David Bell — Wed, 21 Oct 2020 11:33:20 +0000

(╯°□°)╯ .find()

find() is used to find an element that returns true depending on the condition we have.

const myArr = [1, 4, 6, 9]

const useFind = myArr.find(el => el === 4)
// 4

In the example above we use find() to return the element thats === to 4.

However find() returns the first element it finds.

const myArr = [1, 2, 3, 4, 5, 6]

const useFind = myArr.find(el => el > 2)
// 3

In this example we used a larger array and used find() to return an element > than 2. Even though the array contains more elements greater than 2 it still returned 3. This is because it returns the first element that is true.

Finding Specific Values

find() can be useful when you want a specific id from an array of objects.

const goodBoys = [
  {name: 'spike'},
  {name: 'winston'},
  {name: 'scruffy'}
]
const findDog = goodBoys.find(el => el.name === 'spike')
// { name: 'spike' }

This time we use find() to return us 'spike'.

Let's connect

Twitter

A Quick Look At Hoisting in JavaScript

David Bell — Wed, 21 Oct 2020 11:33:07 +0000

Hoisting is a tricky one. Here is the most basic explanation I can possibly think of for it.

Explained

Essentially allows you to use functions and variables before they have been created.

When JavaScript is first read the JavaScript compiler takes all of your functions and put’s them to the top. So you can technically use a function before it exists.

Example 1

hoisty()

function hoisty() {
  console.log("hoisted!!!")
}
// hoisted!!!

The function hoisty() is declared at the top of our file. Above the declaration. Due to hoisting however the function hoisty() is taken to the top of the file when it gets compiled.

Example 2

hoisty()

function hoisty() {
  console.log(addNums(3, 7))
}
// 10
function addNums(a, b) {
  return a + b
}

In this example we declared the function addNums() at the bottom of our file. Yet the function hoisty() still passed 3, 7 into addNums() with the answer 10 being logged to the console.

Note

Hoisting only works on functions with the function key word function hoisty() not with arrow syntax const hoisty = () =>.

Let's connect

Twitter

The setTimeout() method in JavaScript

David Bell — Wed, 21 Oct 2020 11:32:52 +0000

If you want to run something once after a set time use setTimeout()

Set Timeout

setTimeout() is a window method available to us. It takes two things:

A callback function
Time in milliseconds

setTimeout(() => {
  console.log('1 second!');
}, 1000);
// '1 second!'

In the example an anonymous function () => is passed in. The time in milliseconds is passed at the very end }, 1000). 1 second is printed to the console after 1 second has passed once the rendered.

You can also pass a function into setTimeout.

const oneSec = () => {
  console.log('1 second');
};
// '1 second'

setTimeout(oneSec, 1000);

The function oneSec() is ran after 1000 milliseconds.

setTimeout() is a good way for understanding the asynchronous nature of JavaScript. See the example below.

const oneSec = () => {
  console.log('1 second');
};

setTimeout(oneSec, 1000);
console.log('Me first!');
// 'Me first!'
// '1 second'

In the example Me first! is printed to the console. before 1 second even though the setTimeout is written before the console.log. The code will call oneSec after 1000 milliseconds but in the mean time it continues to read the rest of the code. This is why it's called a callback function.

Let's connect

Twitter

Build with the SWAPI Star Wars API, React with Hooks

David Bell — Wed, 21 Oct 2020 11:32:38 +0000

Let’s make an app with the The Star Wars API. I want to create a simple app that gets data of characters and displays them in a list.

This is not a guide to React so familiarity with some React is essential. Think of this article as a ‘code along with me’ type thing. This is just how I'm going to create a quick little app.

Must include

fetch data from the API
set state using useState and useEffect hooks
Display the content in a list

Cleanup

I like to begin with create react app and delete the files I don’t need. Then create a components folder with the table display component. List.js.

import React from "react"

export const List = () => {
  return <h1>Hello List</h1>
}

In App.js import List.js to check everything is working correctly.

import React from "react"
import { List } from "./components/List"

function App() {
  return (
    <div>
      <List />
    </div>
  )
}

export default App

Fetching the Data

Create a folder called utils with the file api.js. This will have out API data fetching functions within.

Add the url endpoints:

const urls = [
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/2",
  "https://swapi.co/api/people/3",
  "https://swapi.co/api/people/4",
]

Layout a try/catch async function. This is a good thing to start with because it lays it out for you explicitly. Basically the function will try to do something and if theres something wrong it will catch the error and log it to the console.

  export const fetchData = async () => {
      try {

      } catch (error) {
          console.log(‘Error’, error)
      }
  }

Now our try/catch is laid out let's add the rest. Then I’ll explain.

export const fetchData = async () => {
  try {
    const response = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    );
    console.log(response);
    return response;
  } catch (error) {
    console.log(‘Error’, error);
  }
};

We create a variable response for holding our data.
Using the keyword await. Await - ‘Go do this for me and come back with what you get.’
Promise.all method is used to tell the function to go and do all of the urls from our urls array. One at a time.
Using .map() array method to iterate over our array.
We then pass each url into the fetch(). Seen as url => fetch(url)
We use .then for chaining. Taking the response or ‘res’ which is returned once ‘fetched’. Convert the response to JSON which we can use.

But we need to call this function in our app when the page is rendered to the screen. We do this using the useEffect hook from react. No if you check in the console you will see our Star Wars data logged.

import React, { useEffect } from "react"

import { List } from "./components/List"
import { fetchData } from "./utils/api"

function App() {
  useEffect(() => {
    fetchData()
  })

  return (
    <div>
      <List />
    </div>
  )
}

Setting State

Now we must create some state to use. We will do this with the useState hook.

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

import { List } from "./components/List"
import { fetchData } from "./utils/api"

function App() {
  const [people, setPeople] = useState([])

  useEffect(() => {
    fetchData().then(response => setPeople(response))
  })

  return (
    <div>
      <Table />
    </div>
  )
}

We import useState from React
Create state as an empty array const [people, setPeople] = useState([])
Using .then once more for chaining. We get the response and set our state to the response .then(response => setPeople(response))

Now check your React dev tools and if followed correctly you will see the state is now Star Wars characters.

Now we have our people state we must pass it into our List component <List people={people} />

Display the Data

export const List = ({ people }) => {
  return (
    <div>
      <h1>List</h1>
      <ul>
        {people.map(person => {
          return <li key={person.name}>{person.name}</li>
        })}
      </ul>
    </div>
  )
}

We de-structure people { people }
using map() we iterate over our array 'people’ and for each person we display the name of the person as a list item.

And there we have a very very basic app displaying data from an API in React.

Conclusion

Though very basic maybe you could get some value out of this. There is lots more that can be done to extend this app further. Go ahead and add styles and use more data from the SWAPI API.

Let's connect

Twitter

Using some(), every() and Object.values to check values from within an object

David Bell — Wed, 21 Oct 2020 11:32:26 +0000

Often you want to check if a value is within an object. Heres a way we can do this with some() every() and Object.values().

Object.values

Object.values is used to create an array from the values in an Object. You pass an object into Object.values and it returns an array of the values.

const stock = {
  meat: 5,
  fruit: 10,
  cheese: 6,
}
const valueArray = Object.values(stock)
// [ 5, 10, 6 ]

some()

some() returns true if one thing passes the test depending on the condition passed in. If not it will return false.

const stock = {
  meat: 5,
  fruit: 10,
  cheese: 6,
}
const enoughStock = Object.values(stock).some(el => el >= 6)
console.log(enoughStock)
// true

const kidsParty = {
  suzy: 29,
  bill: 4,
  tim: 2,
  sally: 5,
  ming: 3,
}
const isAdultPresent = Object.values(kidsParty).some(el => el >= 18)
console.log(isAdultPresent)
// true

every()

every() returns true or false depending on the condition if every thing passes the test depending on the condition.

const nightclub = {
  dave: 26,
  sally: 23,
  mike: 17,
  lucy: 18,
}
const isOldEnough = Object.values(nightclub).every(el => el >= 18)
// false

if (!isOldEnough) {
  console.log("Check every ID")
}

Let's connect

Twitter