Example Code

import React from "react";
// you do not have to import React from "react" anymore :)
import { CSSReset, Stack, Heading, Flex, Box } from "@chakra-ui/core";
import ColorMode from "./components/ColorMode";
import ToggleColorMode from "./components/ToggleColorMode";
import Info from "./components/Info";
import ModalComp from "./components/ModalComp";
import Parent from "./components/Parent";
 
const App = () => {
  return (
    <ColorMode>
      <CSSReset />
      <Flex>
        <ToggleColorMode />
        <ModalComp openButtonText="Show Info" header="Info">
          <Info />
        </ModalComp>
      </Flex>
      <Box px={10} py={2}>
        <Flex justify="center">
          {/* array as prop value refers to screen sizes
            base width is 100%
            480px screen width and up width = 80%
            768px and up width = 30%
          */}
          <Stack width={["100%", 0.8, 0.3]} spacing={3}>
            <Heading
              color="cyan.500"
              mb={2}
              as="h1"
              textAlign="center"
              fontSize={[32, 48, 60]}
            >
              Hooks & Props
            </Heading>
            <Parent />
          </Stack>
        </Flex>
      </Box>
    </ColorMode>
  );
};
 
export default function MyApp() {
  return <App />;
}

import React, { useState } from "react";
import InputFields from "./InputFields";
import Child from "./Child";
 
export default function Parent(props) {
  const [parentFirstName, setParentFirstName] = useState("");
  const [parentLastName, setParentLastName] = useState("");
 
  return (
    <div>
      <InputFields
        header="Parent"
        firstName={parentFirstName}
        lastName={parentLastName}
        setFirstName={setParentFirstName}
        setLastName={setParentLastName}
      />
      {/* only render this component on the page if parentLastName does not equal an empty string */}
      {parentLastName && <Child parentLastName={parentLastName} />}
    </div>
  );
}

import React, { useState, useEffect } from "react";
import InputFields from "./InputFields";
import Grandchild from "./Grandchild";
 
export default function Child(props) {
  // Child has a first name and last name as state values
  const [childFirstName, setChildFirstName] = useState("");
  const [childLastName, setChildLastName] = useState("");
 
  // if a child has a first name set the last name in state to the parent's last name
  // this effect will only run when those values change because we declared them in the dependency array
  useEffect(() => {
    if (childFirstName) {
      setChildLastName(props.parentLastName);
    }
  }, [childFirstName, props.parentLastName]);
 
  return (
    <>
      <InputFields
        header="Child"
        firstName={childFirstName}
        lastName={childLastName}
        setFirstName={setChildFirstName}
        setLastName={setChildLastName}
      />
      {/* only render this component on the page if childLastName does not equal an empty string */}
      {childLastName && <Grandchild childLastName={childLastName} />}
    </>
  );
}

import React, { useState } from "react";
import InputFields from "./InputFields";
import Child from "./Child";
 
import React, { useState, useEffect } from "react";
import InputFields from "./InputFields";
 
export default function Grandchild(props) {
  const [grandChildFirstName, setGrandChildFirstName] = useState("");
  const [grandChildLastName, setGrandChildLastName] = useState("");
 
  useEffect(() => {
    if (grandChildFirstName) {
      setGrandChildLastName(props.childLastName);
    }
  }, [grandChildFirstName, props.childLastName]);
 
  return (
    <InputFields
      header="Grandchild"
      firstName={grandChildFirstName}
      lastName={grandChildLastName}
      setFirstName={setGrandChildFirstName}
      setLastName={setGrandChildLastName}
    />
  );
}