Game View - Game Wrapper Rock Paper Scissors

What you will be building

Please check this link: Rock Paper Scissors Game

Game Wrapper

The game wrapper is a simple view component used to provide an encasement around a few other components.

view/wrapper.tsx file

import React, { ReactElement } from 'react';
//  chakra-ui
import { Box } from '@chakra-ui/react';

interface Props {
  children: ReactElement;
}

const DisplayWrapper = (props: Props) => {
  const { children } = props;

  return (
    <Box display="flex" justifyContent="center" w="100%">
      {children}
    </Box>
  );
};

export default DisplayWrapper;

The only thing particularly special about this component is that is uses the Box component from Chakra UI .

If you are not familiar with React, you may be wondering what children is. We are expecting React elements to be passed into this component from the Game Entry component.

Therefore the interface for children is declared (and not optional - optional interfaces are indicated with a question (?) mark), and we use the ReactElement definition in this case.

Job done!