I am using mobx react a type script
Why does <MainNote/>
show the error
Do i just need to set default props?
Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
(alias) class MainNote
import MainNote
I do not want to pass the prop in as it is a prop ejected by mobx.
Thanks for the help
The code is below
import React, { Component } from 'react';
import MainNote from './MainNote';
import { observable, computed } from 'mobx'
import { observer, inject, IStoresToProps } from 'mobx-react'
import { IStore } from '../interfaces/store/IStore'
import style from '../styles/App.module.css';
import { IProfileStore } from '../interfaces/Profile/IProfileStore';
import { iProfile } from '../interfaces/Profile/iProfile';
interface AppProps {
profileStore?: IProfileStore
}
export interface IProfileStore {
profile: iProfile,
counter: number,
loadProfile?: () => void
}
@inject("profileStore")
@observer
class App extends Component<AppProps> {
static defaultProps = { profileStore: {counter: 0}};
render() {
return (
<div className={`container-fluid w-100 h-100 ${style.background}`}>
<MainNote/>
{console.log('props', this.props.profileStore) }
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import { observable, computed } from 'mobx'
import { observer, inject, IStoresToProps } from 'mobx-react'
import style from '../styles/MainNote.module.css'
import { IStore } from '../interfaces/store/IStore'
import {IProsStore} from '../interfaces/store/IPropsStore'
interface AppProps {
profileStore: IProfileStore;
}
interface IProfileStore {
profile: iProfile;
counter: number;
loadProfile?: () => void;
}
interface iProfile
{
Details: iDetails;
Address: iAddress;
Notes: iNote[];
}
interface iDetails
{
Name: string;
Email: string;
Age: number;
CellNumber: number;
}
interface iAddress
{
No: number;
Road: string;
Street: string;
Place: string;
}
interface iNote
{
Date: Date | string;
Subject: string;
Text: string;
Private: boolean;
Archived: boolean;
}
@inject("profileStore")
@observer
class MainNote extends Component<AppProps> {
render() {
const { Address } = this.props.profileStore.profile;
console.log('s', this.props.profileStore.profile.Address.No)
return (
<div className={style.makeLookCool}>
<ul className="list-group">
<li className="list-group-item">{Address.No} {Address.Place} {Address.Road} {Address.Street}</li>
</ul>
</div>
);
}
}
export default MainNote;
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './styles/index.css';
import App from "./componenets/App";
import { Provider } from 'mobx-react';
import {IProsStore} from './interfaces/store/IPropsStore'
import * as serviceWorker from './serviceWorker';
// import NotesStore from "./NotesStore";
// import CounterStore from "./CounterStore";
import ProfileStore from './store/ProfileStore';
import { IStore } from './interfaces/store/IStore';
const Store: IStore = {
profileStore: new ProfileStore(),
};
ReactDOM.render(
<Provider {...Store}>
<App />
</Provider>,
document.getElementById('root'));
The TypeScript error "Property is missing in type but required in type" occurs when we do not set all of the properties an object of the specified type requires. To solve the error, make sure to set all of the required properties on the object or mark the properties as optional.
The React. js error "Property is missing in type but required in type" occurs when we don't pass all of the required props to a component. To solve the error, make sure to pass all of the props the component requires, e.g. <MyComponent name="Tom" age={30} /> or mark its props as optional.
The error "Type is missing the following properties from type" occurs when the type we assign to a variable is missing some of the properties the actual type of the variable expects. To solve the error, make sure to specify all of the required properties on the object. Here are some examples of how the error occurs.
Make profileStore props mandatory from:
interface AppProps {
profileStore: IProfileStore;
}
to optional
interface AppProps {
profileStore?: IProfileStore;
}
The answer is to set the default prop in the component
static defaultProps = {profileStore:{}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With