richleach

import React from "react";

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <main className="flex min-h-screen w-full items-center justify-center">
      {children}
    </main>
  );
};

richleach

//in this sample, assume an axios get request returned a number between 1 and 5 which was stored in state (stAffection).
//instead of parsing it out above the return block and possibly creating another variable, this is a way to do it "inline"

return (
<>
  //...HTML formatting stuff, maybe some output, mapping, etc.
  <h3 className="m-2"><span className="font-semibold">Affection level: </span> 
      {(() => {
          switch (stAffection) {
          case 5: return " Most affectionate";

richleach

//array of objects
const myItems = [{"name": "eggs", "price": 1},{"name": "coffee", "price": 9.99}, {"name": "rich", "price": 4.04}]

const sortByName = myItems.sort(function(a,b) {
    let nameA = a.name.toUpperCase()
    let nameB = b.name.toUpperCase()
    if(nameA < nameB) {
        return -1
    }
    if(nameA > nameB){

richleach

//array of objects
const myItems = [{"name": "eggs", "price": 1},{"name": "coffee", "price": 9.99}, {"name": "rich", "price": 4.04}]

//If you want to sort myItems by price. 
const revised = myItems.sort((function(a,b){
    return a.price - b.price
}))

console.log(revised);

richleach

import React from 'react'
import Counter from '../Counter'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'

test('Header renders with correct text', () => {
    const { getByTestId } = render(<Counter />)
    const headerEl = getByTestId("header")

    expect(headerEl.textContent).toBe("My Counter")

richleach

import React, { useState } from 'react'
import "../Counter/counter.css"

function Counter() {

    const [counterValue, setCounterValue] = useState(0)
    const [inputValue, setInputValue] = useState(1)
    const addToCounter = () => {
        setCounterValue(counterValue + inputValue)
    }

richleach

import React, { useState } from 'react'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Container from '@material-ui/core/Container'
import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
import { makeStyles, TextField, Radio, RadioGroup, FormControlLabel, FormLabel, FormControl } from '@material-ui/core'
import { useHistory } from 'react-router-dom'

const useStyles = makeStyles({
  field: {

richleach

import React from 'react'
import Card from '@material-ui/core/Card'
import CardHeader from '@material-ui/core/CardHeader'
import CardContent from '@material-ui/core/CardContent'
import { IconButton, makeStyles, Typography } from '@material-ui/core'
import { DeleteOutlined } from '@material-ui/icons'
import Avatar from '@material-ui/core/Avatar'
import { blue, green, pink, yellow } from '@material-ui/core/colors'

const useStyles = makeStyles({

richleach

//this file calls the JSON Server, passes each returned note as a prop to the NoteCard component
import React, {useState} from 'react'
import { useEffect } from 'react'
import Grid from '@material-ui/core/Grid'
import { Container } from '@material-ui/core'
import NoteCard from '../components/NoteCard'

export default function Notes() {
  const [notes, setNotes] = useState([])

richleach

//Using JSON Server
//Install JSON Server locally
npm install -g json-server

//Run JSON Server
json-server --watch data/db.json --port 8000
//which means http://localhost:8000/notes will return the 4 JS objects below.

//Create a file like below named "db.json". All of the objects below are part of the "notes" endpoint
{