State Management - Components

components.tsx

import React, { Component } from 'react';

export interface HeaderProps {
    searchBoxProps: SearchBoxProps;
}

export class Header extends Component<HeaderProps> {
    render() {
        return (
            <div>
                <SearchBox {...this.props.searchBoxProps} />
            </div>
        );
    }
}
    
export interface SearchBoxProps {
    query?: string;
    isLoading: string;
    data: string[];
    onSearch?: (query: string) => void;
}

export class SearchBox extends Component<SearchBoxProps> {
    render() {
        // Render the component ..
    }
}