export let microEventBus: MicroEventBus = (window as any).microEventBus;
export interface IAppState {
showDetails: boolean;
product: IProduct | null;
collectionInstance: Collection;
username: string;
}
//const collectionInstance = new Collection();
class App extends React.Component<IAppProps, IAppState> {
constructor(props: IAppProps) {
super(props);
this.showDetailView = this.showDetailView.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
showDetails: false,
product: null,
collectionInstance: new Collection(),
username: '',
};
}
componentDidMount() {
this.processUserLoginEvent = this.processUserLoginEvent.bind(this);
microEventBus.on('user-logged-in').subscribe(this.processUserLoginEvent);
ajax.getJSON('http://128.0.0.1:3000/products').subscribe((data) => {
let collection = new Collection();
collection.items = data as IProduct[];
this.setState({
showDetails: false,
product: null,
collectionInstance: collection,
});
});
}
render() {
return (
<div>
{this.state.collectionInstance.items.length < 1 ? (
<div className='App-header'>
<CircularProgress />
</div>
) : (
''
)}
<CollectionView
{...this.state.collectionInstance}
handlerItemClicked={this.showDetailView}></CollectionView>
<DetailView
open={this.state.showDetails}
product={this.state.product}
handleClose={this.handleClose}
**problem**-->username={this.state.username}></DetailView>
I have problem with a code. I got a type error for username property. I try to change type of string to a type of any but that did't solved my problem. Any sugestions ?
ERROR:
Type '{ open: boolean; product: IProduct | null; handleClose: () => void; username: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. Property 'username' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'.ts(2322)
From the error message, it seems that the DetailView component does not support a username prop. That is to say, the error you see with the following code:
<DetailView
open={this.state.showDetails}
product={this.state.product}
handleClose={this.handleClose}
username={this.state.username}></DetailView>
is not because username is absent on state, but because the DetailView component expects different props.