Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

Type '{}' is missing the following properties from type . .

$
0
0

I have been trying to run this React Typescript App, but it keeps getting this error, and I have no idea what to do!2 errors states:

"Type '{}' is missing the following properties from type 'Readonly': isAdmin, username, history, location, match"

This here would be the code:

import * as React from 'react';import { RouteComponentProps } from 'react-router-dom';import { Link } from 'react-router-dom';interface IProps extends RouteComponentProps {  isAdmin: boolean;  username: string;}interface IState {  posts: IPost[];  comments: IComment[];}interface IPost {  id: number;  title: string;  body: string;  author: string;}interface IComment {  id: number;  postId: number;  body: string;  author: string;}class Website extends React.Component<IProps, IState> {  constructor(props: IProps) {    super(props);    this.state = {      posts: [],      comments: [],    };  }  public componentDidMount() {    this.fetchPosts();    this.fetchComments();  }  public render() {    return (<div>        {this.props.isAdmin && (<div><Link to="/create-post">Create Post</Link><Link to="/delete-post">Delete Post</Link></div>        )}        {this.props.username && (<div><Link to="/create-comment">Create Comment</Link><Link to="/edit-comment">Edit Comment</Link><Link to="/delete-comment">Delete Comment</Link></div>        )}<div>          {this.state.posts.map((post) => (<div key={post.id}><h2>{post.title}</h2><p>{post.body}</p><p>By: {post.author}</p></div>          ))}</div><div>          {this.state.comments.map((comment) => (<div key={comment.id}><p>{comment.body}</p><p>By: {comment.author}</p></div>          ))}</div></div>    );  }  private createPost = (title: string, body: string) => {    // Create a new post in the database  };  private deletePost = (id: number) => {    // Delete the post with the specified id from the database  };  private createComment = (postId: number, body: string) => {    // Create a new comment in the database  };  private editComment = (id: number, body: string) => {    // Edit the comment with the specified id in the database  };  private deleteComment = (id: number) => {    // Delete the comment with the specified id from the database  };  private fetchPosts = () => {    // Fetch posts from the database and update the state  };  private fetchComments = () => {    // Fetch comments from the database and update the state  };}export default Website;

I really dont know where to fix it.


Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>