Can't render another component from another - reactjs

Question

I am having trouble rendering another component from my current component in vs code. The error message I get is..
Type '{}' is not assignable to type 'IntrinsicAttributes &
IntrinsicClassAttributes & Readonly<{ children?: ReactNode;
}> & ...'. Type '{}' is not assignable to type
'Readonly>'.
Property 'match' is missing in type '{}'.
Here is my code..
import * as React from 'react';
import { BillList } from './BillList';
import * as ReactDOM from "react-dom";
export interface BillComponentState {
children?: React.ReactNode,
bills: BillList
}
export class BillComponent extends React.Component<BillList>{
public render() {
return <div className='container-fluid'>
<div className='row'>
<div className='col-sm-3'>
<BillList />
</div>
<div className='col-sm-9'>
{this.props.children}
</div>
</div>
</div>;
}
}
Why can't I just render my BillList which is literally rendering a list of strings from a web api on my web server?
Disclaimer: I'm very new to React
EDIT: Here is the code in BillList.tsx
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
interface BillState {
bills: Bill[],
loading: boolean
}
export class BillList extends React.Component<RouteComponentProps<{}>, BillState>
{
constructor() {
super();
this.state = { bills: [], loading: true };
fetch("api/SampleData/GetBills")
.then(response => response.json() as Promise<Bill[]>)
.then(data => {
this.setState({
bills: data,
loading: false
});
});
}
public render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: BillList.renderBillsToList(this.state.bills);
return <div className="rendered-bills">
<h1>Bills to pay</h1>
{contents}
</div>
}
public static renderBillsToList(bills: Bill[]) {
return <ul>
{bills.map((bill, i) =>
<li key={i}> {bill.name} </li>
)}
</ul>;
}
}
interface Bill {
name: string;
}
Here is the code in a public repo. Let me know if you need more debugging information from me.
https://github.com/ddeamaral/billTracker

Answer 1

This code sample doesn't provide enough information to tell where the error originated from. However, the React.Component first parameter accepts the components properties and you seem to be passing on a component (BillList). Also there is a BillComponentState interface defined but never used and I don't see any actual component state.
Based on this code sample I can only advise you to rename BillComponentState to BillComponentProps and pass this to the component instead of BillList.
import * as React from 'react';
import { BillList } from './BillList';
import * as ReactDOM from "react-dom";
export interface BillComponentProps {
children?: React.ReactNode,
bills: BillList
}
export class BillComponent extends React.Component<BillComponentProps>{
public render() {
return <div className='container-fluid'>
<div className='row'>
<div className='col-sm-3'>
<BillList />
</div>
<div className='col-sm-9'>
{this.props.children}
</div>
</div>
</div>;
}
}
But this is just guessing since we don't know what BillList looks like.