richleach’s gists

richleach / useEffectAxios.js

Created April 21, 2021 23:26

useEffect making async/await axios call with error trapping, and setting to run every time a state var called "stockSymbol" updates

	useEffect(() => {
	async function getDataAxios() {

	setLoading(true);

	await axios({
	"method": "GET",
	"url": "https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/get-detail",
	"headers": {
	"content-type": "application/octet-stream",

richleach / ifThenShortcut.js

Created April 21, 2021 21:50

Shortcut to if/then

	//if stateToCheck is true then render doThisComponent.
	//if stateToCheck is false, just skip the component.
	{stateToCheck && <doThisComponent />}

richleach / useRefFormSubmission.js

Created April 21, 2021 21:40

Use the useRef hook to create an association of the form field/value to something React can use. Create a variable with useRef, then assign that variable to the form field's value. Easy-peasy.

	import { useRef } from 'react';

	function MyFunction() {
	const titleInputRef=useRef();
	const addressInputRef=useRef();

	function submitHandler(event){
	event.preventDefault();
	const enteredTitle = titleInputRef.current.value;
	const enteredAddress = addressInputRef.current.value;

richleach / previousState.js

Created April 21, 2021 21:31

In React you need to use previous state during incrementing loops because React doesn't apply state updates immediately due to performance, so if you're expecting to update state and then immediately see it, you should ask Santa for it instead.

	function HookCounter() {
	const [count, setCount] = useState(initialCount)

	//why you need prevState
	const incrementFive = () => {
	for(let i=0; i <5; i++){
	setCount(prevCount => prevCount + 1)
	}
	}
	return (

richleach / simpleArrayMap.js

Created April 21, 2021 21:27

Looping over data stuff in JS/React is always done with array.map. Don't forget the key!

	import React from 'react';

	function myTest() {
	const dummyData = [
	{id: 1, title: 'Title 1', image: 'www.image.com/1', desc: 'Description 1'},
	{id: 2, title: 'Title 2', image: 'www.image.com/2', desc: 'Description 2'},
	{id: 3, title: 'Title 3', image: 'www.image.com/3', desc: 'Description 3'}
	];

	return (

richleach / navigateUsinguseHistory.js

Created April 21, 2021 21:22

Programmatic navigation using useHistory (like cflocation works)

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

	function MyFunction() {
	const history = useHistory();

	//execute some code, maybe call an API, then redirect to the home page

	history.replace('/');
	}

richleach / currentDateInCopyright.js

Created April 21, 2021 21:17

Footer.js in action (display current date dynamically in Javascript (React)

	function getYear() {
	return new Date().getFullYear()
	}
	function Footer() {
	return (
	<footer className="footer bg-dark py-1 text-center">
	Copyright © {getYear()} richleach.com. All Rights Reserved. Please don't steal my stuff.
	</footer>
	)
	}

richleach / randomNumber.js

Created April 21, 2021 20:56

JS Snippet: Generate a random number, display in console

	const rand = Math.floor(Math.random() * 10)+1
	console.log(rand)

richleach / javascript.js

Last active August 9, 2020 19:41

fetch a json file, loop through each value in the json file (forEach()) and print it out to a div on screen

	//FETCH, JSON, FOREACH & DIV.INNERHTML EXAMPLE
	//fetch a json file, loop through each value in the json file and print it out to a div on screen

	//this is the contents of the people.json file that would need to be located in the same directory to work on your machine
	[
	{"name": "John",
	"age": 20},
	{"name": "Mary",
	"age": 24},
	{"name": "Bob",

richleach / flexBoxLayout.html

Last active July 9, 2020 19:45

flexbox HTML and CSS starter template code

	<!-- copy and paste entire file and open in browser.
	Simple layout using flexbox to build columns, I always seem to forget how to do this....
	-->
	<html>
	<head>
	<title>HTML & CSS</title>

	<style>
	body {
	margin: 0;

Rich Leach richleach