Parent.tsx

import React from "react";
import Radio from "./Radio";
import Input from "./Input";
import Select from "./Select";
import Textarea from "./Textarea";
import Checkbox from "./Checkbox";
import Checkboxes from "./Checkboxes";

class Parent extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      formObject: {
        inputValue: "",
        textareaValue: "",
        radioValue: "day",
        selectValue: "cat",
        checkboxValue: false,
        playing: false,
        sleeping: false,
        eating: false
      }
    };

    this.genericHandler = this.genericHandler.bind(this);
  }

  componentDidUpdate() {
    console.clear();
    console.log("CDU formObject: " + JSON.stringify(this.state.formObject));
  }

  genericHandler = (e: any) => {
    const { name, checked, type, value, id } = e.target;
    const { formObject } = this.state;
    if (type === "radio") {
      this.setState({
        formObject: {
          ...formObject,
          [id]: value
        }
      });
    } else {
      this.setState({
        formObject: {
          ...formObject,
          [name]: type === "checkbox" ? checked : value
          // [name]: !this.state.formObject.checkboxValue
        }
      });
    }
  };

  render() {
    const state = { ...this.state.formObject };
    return (
      <div>
        <Input {...state} genericHandler={this.genericHandler} />
        <br />
        <Textarea {...state} genericHandler={this.genericHandler} />
        <br />
        <Checkbox {...state} genericHandler={this.genericHandler} />
        <Checkboxes {...state} genericHandler={this.genericHandler} />
        <Radio {...state} genericHandler={this.genericHandler} />
        <Select {...state} genericHandler={this.genericHandler} />
      </div>
    );
  }
}

export default Parent;