Mastering TypeScript/

...

/

Exploring DetailView and App Components

Exploring DetailView and App Components

Learn about DetailView and App components in a React product catalog, managing product details and visibility.

We'll cover the following...

We have discussed the CollectionView and ItemView components in detail, but there are still more important components of our application that we need to go through: the DetailView component and the App component.

Let’s start with the DetailView component.

The DetailView component

When a user clicks on one of our products, we would like a panel to slide in from the right of the screen with a detailed view of the product in question. This DetailView component in the DetailView.tsx file is as follows:

Press + to interact
export interface IDetailsProps {
    open: boolean;
    product: IProduct | null;
    handleClose(): void;
}
const Transition = React.forwardRef(function Transition(
    props: TransitionProps & { children?: React.ReactElement },
    ref: React.Ref<unknown>,
) {
    return <Slide direction="left" ref={ref} {...props} />;
});
export class DetailView extends React.Component<IDetailsProps> {
    constructor(props: IDetailsProps) {
        super(props);
        this.handleClose = this.handleClose.bind(this);
    }
    render() {
        return (
            <div className="full-screen-details-dialogue">
                <Dialog
                    fullScreen
                    open={this.props.open}
                    TransitionComponent={Transition}>
                    <AppBar>
                        <Toolbar>
                            <IconButton
                                edge="start"
                                color="inherit"
                                onClick={this.handleClose}
                                aria-label="close">
                            <Close></Close>
                            </IconButton>
                        </Toolbar>
                    </AppBar>
                // Other screen elements, we aren't showing the complete code here.
                </Dialog>
            </div>
        )
    }
    handleClose() {
        console.log(`Details: handleClose()`)
        this.props.handleClose();
    }
}

In this component:

  • We start with an interface named IDetailsProps, which is on lines 1-4 of our code. It contains the properties and methods that our DetailView component will need. The first property is named open, is of type boolean, and controls whether the fullscreen Dialog component is open or closed. The second property is named product and will contain the currently selected product. We then have a function named handleClose, which is the callback function that is passed into our DetailView component by the parent component.

  • We then define a constant named ...