MostlyFocusedMike

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(function(response) {
    console.log(`status: ${response.status}`);
    console.dir(response.body);
    return response.json() // the important line 
  })
  .then(function(myJson) {
    document.write(
      `User: ${myJson.name} <br/>
      Email: ${myJson.email} <br />

MostlyFocusedMike

const Adapter = {
  baseUrl: "http://localhost:3000/tasks",
  toJSON: function(data) {
    return data.then((res) => res.json())
  },
  getAll: function() {
    return this.toJSON(fetch(this.baseUrl));
  },
  getOne: function(id) {
    return this.toJSON(fetch(`${this.baseUrl}/${id}`))

MostlyFocusedMike

let user = {
  paid: true, 
  attributes: {
    id: 43020233, 
    description: {
      name: "tom", 
      age: 23, 
      level: 2
    }
  }

MostlyFocusedMike

let user = {
  paid: true, 
  attributes: {
    id: 43020233, 
    description: {
      name: "tom", 
      age: 23, 
      level: 2
    }
  }

MostlyFocusedMike

//  /src/components/Form.js 
import React from "react"
class Form extends React.Component {
  
  render() {
    return (
      <form>
        <label htmlFor="owner">Owner</label> 
        <input type="text" name="owner" id="owner" />
        <label htmlFor="description">Description</label> 

MostlyFocusedMike

import React from "react"
class Form extends React.Component {
  state = {
    cats: [{name:"", age:""}],
  }
  render() {
    let {cats} = this.state
    return (
      <form>
        <label htmlFor="name">Owner</label> 

MostlyFocusedMike

//...state...
  addCat = (e) => {
    this.setState((prevState) => ({
      cats: [...prevState.cats, {name:"", age:""}],
    }));
  }
handleSubmit = (e) => { e.preventDefault() }
render() {
    let {cats} = this.state
    return (

MostlyFocusedMike

class Form extends React.Component {
state = {
  cats: [{name:"", age:""}],
  owner: "",
  description: ""
}
handleChange = (e) => {
  if (["name", "age"].includes(e.target.className) ) {
    let cats = [...this.state.cats]   
    cats[e.target.dataset.id][e.target.className] = e.target.value

MostlyFocusedMike

import React from "react"
class Form extends React.Component {
  state = {
    cats: [{name:"", age:""}],
    owner: "",
    description: ""
  }
handleChange = (e) => {
    if (["name", "age"].includes(e.target.className) ) {
      let cats = [...this.state.cats]

MostlyFocusedMike

// src/components/CatInputs.js
import React from "react"
const CatInputs = (props) => {
  return (
    props.cats.map((val, idx)=> {
      let catId = `cat-${idx}`, ageId = `age-${idx}`
      return (
        <div key={idx}>
          <label htmlFor={catId}>{`Cat #${idx + 1}`}</label>
          <input