import { useEffect, useState } from "react"; import "./styles.scss"; type InputProps = { onChange: () => void; placeholder: string; label: string; id: string; }; const Input = ({ onChange, label, placeholder, id }: InputProps) => { useEffect(() => { console.log(`Input mounted`); }, []); return ( <> {label} ); }; const TextPlaceholder = () =>

Hello human! No tax for you

; export default function App() { const [isCompany1, setIsCompany1] = useState(false); const [isCompany2, setIsCompany2] = useState(false); return (

Am I a person or a business?

Turn the checkbox on and off to switch between person and business fields

Input will re-render

setIsCompany2(!isCompany2)} /> Check if you're a company {isCompany2 ? ( {}} id="company-tax-id" key="tax" /> ) : null} {!isCompany2 ? ( {}} id="person-tax-id" key="tax" /> ) : null}

Input will unmount and mount

setIsCompany1(!isCompany1)} /> Check if you're a company {isCompany1 ? ( {}} id="company-tax-id" /> ) : null} {!isCompany1 ? ( {}} id="person-tax-id" /> ) : null}

); }