Search code examples
reactjsreact-tsx

How do I create two versions of the same component in react JS

I'm beginning with react TS, and am trying to create a card with two "versions": one is before the user validates their profile and it has one input field that should be disabled, and the other is after the user validates the profile so the same input field should now be enabled. I thought about creating those two versions of the input field and then switching between them, is that the recommended approach? I need to be able to manipulate both the css and html of both versions to differentiate them. Thank you.

Solution

  • Yes you can do it, but instead of managing two separate components you can manage a flag which will let you toggle between enabled and disabled state of input field for that you need to use useState which will store a Boolean value in it.

    const [isValidated, setIsValidated] = useState(false);
...
return(
<>
   <input type="text" disabled={isValidated}/>
   ...
</>
);