Conditional rendering

DEMO

Loading

ConditionalRendering.jsx

function ConditionalRenderingDemo() {
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <>
      {isLoading ? (
        <div>
          <Spinner />
          <p>Loading</p>
        </div>
      ) : (
        <p>Done</p>
      )}
    </>
  );
}  

const spin = keyframes`
  0% {
    transform: rotate(0deg);
  }  
  100% {
    transform: rotate(360deg)
  }
`;

const Spinner = styled(ImSpinner2)`
  animation: ${spin} 1.5s linear infinite;
`;

Note: Code snippets do not include styling details unless they are the focus of the exercise.

Copyright © 2022 Explore React