1

I'm currently trying to implement a simple webapp with react and fluent ui. Right now I'm working on a toolbar with a Coachmark. But all that is not important. My function component make use of React.useState and initializes it from a property of type boolean. Directly after this the state is false, no matter what the value of that property is. Here is the relevant code snippet:

type HeadDataCommandBarProps = {
  onSave: any,
  onComment: any,
  showCoachmark: boolean
};

const InvoiceHeadDataCommandBar: React.FunctionComponent<InvoiceHeadDataCommandBarProps> = ({ onSave, onComment, showCoachmark }) => {

  console.log('showCoachmark', showCoachmark);
  const [isCoachmarkVisible, setIsCoachmarkVisible] = React.useState(showCoachmark);
  console.log('isCoachmarkVisible', isCoachmarkVisible);
  const onDismissCoachmark = () => setIsCoachmarkVisible(false);

  return (
    <IndividualCommandBarButtonAsExample
      onDismissCoachmark={onDismissCoachmark}
      isCoachmarkVisible={isCoachmarkVisible}
      onSave={onSave}
      onComment={onComment}
    />
  );
}

export default InvoiceHeadDataCommandBar;

This is the log output:

showCoachmark true InvoiceHeadDataCommandBar.tsx:94:12
isCoachmarkVisible false InvoiceHeadDataCommandBar.tsx:96:10

Could anybody point me in the right direction?

Romano Zumbé
  • 7,893
  • 4
  • 33
  • 55
  • 2
    Would be helpful if you would show us what `showCoachmark` is - just console.log it. And also check if your `onDismissCoachmark` function is called on component mount. – kind user Nov 18 '22 at 13:54
  • can you please log and check what's the value of showCoachmark ? and moreover can you please confirm you're not triggering onDismissCoachmark function . since you are setting the state as false in that function – Sarthak Gupta Nov 18 '22 at 14:00
  • I edited my question with the console log. I also made sure that 'onDismissCoachmark' is not called by replacing the setter with another console.log call. Thanks for your help! – Romano Zumbé Nov 18 '22 at 14:27

1 Answers1

0

Instead of this:

isCoachmarkVisible={showCoachmark}

I would do this:

isCoachmarkVisible={isCoachmarkVisible}

Initial state is the value of the prop. Then you set a new state with the function. But what is having the new state is isCoachmarkVisible. Props are inmutable.

Mariano
  • 61
  • 3