How to make MUI Fade fade in on render?

Question

I'm using the Fade component of Material UI as part of a stepper. I want the steps to fade in on render. How can I make it work? sandbox

function getStepContent(step) {
  switch (step) {
    case 0:
      return (
        <Fade in>
          <div>'Step 1: Select campaign settings...'</div>
        </Fade>
      );
    case 1: ...
    default:
      return "Unknown step";
  }
}

Answer 1

You could make a separate component for the Fade components, that would begin with the in prop set to false and then immediately set it to true using some state and a useEffect:

function CustomFade(props) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setShow(true);
  }, []);

  return <Fade in={show}>{props.children}</Fade>;
}

Also, you have to add the key prop to the CustomFade, so React remounts it.

function getStepContent(step) {
  switch (step) {
    case 0:
      return (
        <CustomFade key="step0">
          <div>'Step 1: Select campaign settings...'</div>
        </CustomFade>
      );
    case 1: ...
    default:
      return "Unknown step";
  }
}