Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)

I am using mobx react a type script

Why does <MainNote/> show the error

Do i just need to set default props?

enter image description here

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'));
like image 767
Hello-World Avatar asked Feb 17 '19 17:02

Hello-World


People also ask

What type of element is missing in type but required?

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.

Is missing in type but required in type Iprops?

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.

Is missing the following properties from type?

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.


2 Answers

Make profileStore props mandatory from:

interface AppProps {
  profileStore: IProfileStore;
}

to optional

interface AppProps {
  profileStore?: IProfileStore;
}
like image 87
Yogesh Devgun Avatar answered Oct 27 '22 10:10

Yogesh Devgun


The answer is to set the default prop in the component

  static defaultProps = {profileStore:{}}
like image 26
Hello-World Avatar answered Oct 27 '22 11:10

Hello-World