How to render the same component but with initial state (conditionally)?

Question

I have one specific component that manages its own state using useState . The problem is that I want to render conditionally the same component:

const PaymentScannerView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
  const { t } = useTranslation();

  return props.onFront ? (
    <PBScanner
      header={t('paymentScanner.front.capture.header')}
      instruction={t('paymentScanner.front.capture.instruction')}
      reCaptureText={t('paymentScanner.front.confirmation.reCaptureText')}
      continueText={t('paymentScanner.front.confirmation.continueText')}
      confirmCaptureHandler={props.confirmFrontCaptureHanlder}
      reCaptureHandler={props.reCaptureFrontHandler}
    />
  ): (
    <PBScanner
      header={t('paymentScanner.back.capture.header')}
      instruction={t('paymentScanner.back.capture.instruction')}
      reCaptureText={t('paymentScanner.back.confirmation.reCaptureText')}
      continueText={t('paymentScanner.back.confirmation.continueText')}
      confirmCaptureHandler={props.confirmBackCaptureHandler}
      reCaptureHandler={props.reCaptureBackHandler}
    />
  );
};

But I don't want to share this state between those 2 "versions". To clarify it, suppose this PBScanner component has internal state of counting from 0 . Then is it renders for 5 times within the first condition (meaning that props.onFront is true 5 times), then, even if suddenly props.onFront would equal to false then the second version would preserve the state and would be rendered with counter equal to 5 .

That's not what I want. I want to "treat" these two components as they won't share the state.

How can I do it?

Answer 1

It depends on what you actually want.

1. If the state should be maintained in both components individually, then you should render them both. The component itself should then decide if it will return anything. (Per @NicolasMenettrier suggestion).

2. If you want them to lose their state, when props.onFront changes, then the simplest solution is to add a key-property. Eg:

    <PBScanner key="front" .../> // and "back" respectively

   This way react will regard both as distinct, giving them their own state.
   Note though that this will make them lose their state everytime props.onFront changes.

Answer 2

as They said previously, it depends on what you want. in my opinion the simple solution would be to add key property to PBScanner .

an other solution is to add useEffect hook in **PBScanner ** like this :

import React, {useEffect} from 'react'; 
...
export default PBScanner({header, ...}) {
const [count, setCount] = useState(0);
UseEffect(() => {
setCount(0); // each time PBScanner update with change in header
// (instruction...), Count go to 0.
}, [header]);//here you can use header or instruction ...

}