MostlyFocusedMike

# routes ######################################
Rails.application.routes.draw do
  resources :cats, only: [:index, :show]
  resources :people, only: [:index, :show]
end

# models ######################################
class Person < ApplicationRecord
  has_many :cats 
end

MostlyFocusedMike

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

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

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

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

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

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

//  /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

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
    }
  }