I'm trying to get rid of a warning in my project:
react-dom.development.js?61bb:67 Warning: Prop `id` did not match. Server: "t4j6jv-aria" Client: "v0lutu9-aria"
Unfortunately I have no idea what's causing the problem, any help or help appreciated.
This is what line 60 looks at in CasinoList.tsx:
this is line #60:
Some Code prior to line 60:
interface IProps {
country: string;
flag: string;
casinoComments: {
id: number;
commentId: number;
content: string;
created: string;
likes: number;
author: string;
};
}
interface IState {
slug: String;
selectedLanguage: String;
visible: Boolean;
showList: Boolean;
highlightedHobby: Boolean;
isMobile: Boolean;
tagItems: Array<tagItems>;
activeTag: String;
tagId: Number;
}
interface tagItems {
id: number;
label: String;
name: String;
state: Boolean;
}
export default class FeaturedCasinos extends React.Component<
IProps,
IState,
{ country: String; flag: String }
> {
constructor(props: IProps) {
super(props);
Any ideas?
Related
Making recursive comment structure,
I use the following function.
interface IComment {
_id: string;
body: string;
forum_id: string;
parent_comment_id: string;
author_name: string;
author_id: string;
authorPic: string;
votes: number;
h_voted: number;
created_at: string;
updated_at: string;
}
const getCommentsWithChildren = (comments: IComment[]) => {
const commentsWithChildren = comments.map((comment) => ({
...comment,
children: [],// This is new empty child array
}));
commentsWithChildren.forEach((childComment) => {
const { parent_comment_id } = childComment;
if (parent_comment_id) {
const parent = commentsWithChildren.find(
(comment) => parent_comment_id === comment._id
);
if (parent !== undefined) {
parent.children = parent.children.concat(childComment);// This part make the error
}
}
});
return commentsWithChildren.filter(
({ parent_comment_id, body, children }) =>
parent_comment_id === null && (body !== null || children.length > 0)
);
};
As you can see,
to make a child object array,
add 'children: []'
and then in recursive function
add child by
'parent.children = parent.children.concat(childComment);'
above line cause the error
'No overload matches this call. Overload 1 of 2, '(...items: ConcatArray[]): never[]', gave the following error.
Argument of type '{ children: never[]; _id: string; body: string; forum_id: string; parent_comment_id: string; author_name: string; author_id: string; authorPic: string; votes: number; h_voted: number; created_at: string; updated_at: string; }' is not assignable to parameter of type 'ConcatArray'.
Type '{ children: never[]; _id: string; body: string; forum_id: string; parent_comment_id: string; author_name: string; author_id: string; authorPic: string; votes: number; h_voted: number; created_at: string; updated_at: string; }' is missing the following properties from type 'ConcatArray': length, join, slice
Overload 2 of 2, '(...items: ConcatArray[]): never[]', gave the following error.
Argument of type '{ children: never[]; _id: string; body: string; forum_id: string; parent_comment_id: string; author_name: string; author_id: string; authorPic: string; votes: number; h_voted: number; created_at: string; updated_at: string; }' is not assignable to parameter of type 'ConcatArray'.'
maybe 'children: []' is never type...
In typescript, how to solve this problem?
thanks very much for reading this writing.
When you create your empty array within commentsWithChildren you create an array of never[] - which is what cannot be concatenated.
You should explicitly set the type of commentsWithChildren or the array you set to commentsWithChildren.children.
Thank your N.J.Dawson!!
I solved the above error.
The following code is that.
interface IComment {
_id: string;
body: string;
forum_id: string;
parent_comment_id: string;
author_name: string;
author_id: string;
authorPic: string;
votes: number;
h_voted: number;
created_at: string;
updated_at: string;
}
interface ICommentWithChildren extends IComment {
children: IComment[];
}
const getCommentsWithChildren = (comments: IComment[]) => {
const commentsWithChildren: ICommentWithChildren[] = comments.map(
(comment) => ({
...comment,
children: [],
})
);
commentsWithChildren.forEach((childComment) => {
const { parent_comment_id } = childComment;
if (parent_comment_id) {
const parent = commentsWithChildren.find(
(comment) => parent_comment_id === comment._id
);
if (parent !== undefined) {
parent.children = parent.children.concat(childComment);
}
}
});
return commentsWithChildren.filter(
({ parent_comment_id, body, children }) =>
parent_comment_id === null && (body !== null || children.length > 0)
);
};
added part is
interface ICommentWithChildren extends IComment {
children: IComment[];
}
and modified part is
const commentsWithChildren: ICommentWithChildren[]
thanks again!!
How do I correctly declare tagItems in the code below?
Currently seeing a warning in VSCode, which looks like this:
(property) tagItems: [{
id: number;
label: String;
name: String;
state: Boolean;
}]
Type '[{ id: number; label: string; name: string; state: true; }, { id: number; label: string; name: string; state: false; }, { id: number; label: string; name: string; state: false; }, { id: number; label: string; name: string; state: false; }, { ...; }, { ...; }]' is not assignable to type '[{ id: number; label: String; name: String; state: Boolean; }]'.
Source has 6 element(s) but target allows only 1.ts(2322)
Code:
interface IProps {
country: string;
flag: string;
casinoComments: [
{
id: number;
content: string;
}
];
}
interface IState {
slug: String;
selectedLanguage: String;
visible: Boolean;
showList: Boolean;
highlightedHobby: Boolean;
isMobile: Boolean;
tagItems: [
{
id: number;
label: String;
name: String;
state: Boolean;
}
];
}
export default class Featured extends React.Component<
IProps,
IState,
{ country: String; flag: String }
> {
constructor(props: IProps) {
super(props);
this.state = {
slug: "Visa",
selectedLanguage: "Visa",
visible: false,
showList: true,
highlightedHobby: false,
isMobile: false,
tagItems: [
{
id: 0,
label: "Popular Casinos",
name: "Popular",
state: true,
},
{
id: 1,
label: "PayNPlay",
name: "paynplay",
state: false,
},
{
id: 2,
label: "Mobile",
name: "mobile",
state: false,
},
{
id: 3,
label: "Swish",
name: "swish",
state: false,
},
{
id: 4,
label: "Live",
name: "live",
state: false,
},
{
id: 5,
label: "Klarna",
name: "klarna",
state: false,
},
],
};
Here's a solution that worked:
interface IState {
slug: String;
selectedLanguage: String;
visible: Boolean;
showList: Boolean;
highlightedHobby: Boolean;
isMobile: Boolean;
tagItems: Array<tagItems>;
}
interface tagItems {
id: number;
label: String;
name: String;
state: Boolean;
}
export default class Featured extends React.Component<
IProps,
IState,
{ country: String; flag: String }
> {
constructor(props: IProps) {
super(props);
this.state = {
slug: "Visa",
selectedLanguage: "Visa",
visible: false,
showList: true,
highlightedHobby: false,
isMobile: false,
tagItems: [
{
id: 0,
label: "Popular Casinos",
name: "Popular",
state: true,
},
{
id: 1,
label: "PayNPlay",
name: "paynplay",
state: false,
},
{
id: 2,
........
],
};
type Question= {
id: string;
author: {
name: string;
avatar: string;
};
content: string;
isAnswered: false;
isHighlighted: false;
};
const [question, setQuestion] = useState<Question[]>([]);
I get this error:
Argument of type
'{ id: string; content: string; author: { name: string; avatar: string; }; isHighlighted: boolean; isAnswered: boolean; }[]'
is not assignable to parameter of type
'SetStateAction<Question[]>'.
Type '{ id: string; content: string; author: { name: string; avatar: string; }; isHighlighted: boolean; isAnswered: boolean; }[]' is not assignable to type 'Question[]'.
Type '{ id: string; content: string; author: { name: string; avatar: string; }; isHighlighted: boolean; isAnswered: boolean; }' is not assignable to type 'Question'.
Types of property 'isAnswered' are incompatible.
Type 'boolean' is not assignable to type 'false'.ts(2345)
How can I solve that?
Are isAnswered and isHighlighted properties of Question always going to be false??, otherwise type Question should be edited to this:
type Question= {
id: string;
author: {
name: string;
avatar: string;
};
content: string;
isAnswered: boolean;
isHighlighted: boolean;
};
As with this question about default values in types you cannot set a 'value' for a type because it is about defining what possible values could be not the actual value. A house plan vs. a built house analogy.
It might be possible something similar to this is what you are looking for where you have a constant setting default values (i have copied their example here below).
// using typeof as a shortcut; note that it hoists!
// you can also declare the type of DefaultProps if you choose
// e.g. https://github.com/typescript-cheatsheets/react/issues/415#issuecomment-841223219
type GreetProps = { age: number } & typeof defaultProps;
const defaultProps = {
age: 21,
};
const Greet = (props: GreetProps) => {
// etc
};
Greet.defaultProps = defaultProps;
I need to turn an array of arrays into an array of cbtItem using TypeScript and Angular. ctbItem is an interface
This is the code of the publicatorservice.service.ts:
turnarray( data: any [][] ){
const dataobj: cbtItem[]= data.map(function(row){
return {
a: row[0],
b: row[1],
c: row[2],
d: row[3],
e: row[4],
f: row[5],
g: row[6],
h: row[7],
}
});
this.ELEMENT_DATA = dataobj;
console.log(this.ELEMENT_DATA);
}
This is the code of the interface.ts:
export interface cbtItem {
listing_type_id: string;
title: string;
available_quantity: number;
category_id: string;
buying_mode: string;
currency_id: string;
condition: string;
site_id: string;
price: number;
accepts_mercadopago: boolean;
non_mercado_pago_payment_methods: any[];
warranty: string;
sale_terms: SaleTerm[];
attributes: Attribute[];
pictures: Picture[];
description: Description;
}
export interface Attribute {
id: string;
value_name: string;
name?: string;
value_id?: null | string;
value_struct?: null;
values?: Value[];
attribute_group_id?: string;
attribute_group_name?: string;
source?: number;
}
export interface Value {
id: null | string;
name: string;
struct: null;
source: number;
}
export interface Description {
plain_text: string;
}
export interface Picture {
source: string;
}
export interface SaleTerm {
id: string;
value_name?: string;
value_id?: string;
}
I am getting this error:
"
Type '{ a: string; b: string; c: string; d: string; e: string; f: string; g: string; h: string; i: string; j: string; k: string; l: string; m: string; n: string; o: string; p: string; q: string; r: string; s: string; t: string; u: string; ... 18 more ...; an: string; }[]' is not assignable to type 'cbtItem[]'
"
Hope you can help me, thank you
Can I put some properties inside an array like?
installments: string[];
I had already tried
installments: string[
name: string;
number: number
];
This is my interface
export interface FiscalDocumentData {
id: string;
name: string;
number: number;
type: string;
company: string;
provider: string;
value: string;
paymentCondition: string;
checker: string;
approver: string;
product: string;
issueDate: string;
status: string;
activity: string;
comments: string;
installments: string[];
}
This is an example of a mock
this.data = [{
id: "de89cbb7-be6c-49e7-b3d5-6eef106cca7b",
name: "Linet Fawdrie",
number: 83,
type: "Audi",
company: "Gigazoom",
provider: "Crooks LLC",
value: "$1.56",
paymentCondition: "Peso",
checker: "Eziechiele Beecraft",
approver: "Randy Libri",
product: "NITROGLYCERIN",
issueDate: "10/10/2018",
status: "approved",
activity: "Support",
comments: "Lorem ipsum dolor sit amet",
installments: ['1', '12-14-2019', '5000', 'Payed']
}
you can't add propeties to an array. only objects. but if you wand a array of some type of obejct try this:
installments: FiscalDocumentData[];
As I see all the values inside installments are string, so you need array of strings
installments: string[];
your Model should look like,
declare module namespace {
export interface RootObject {
id: string;
name: string;
number: number;
type: string;
company: string;
provider: string;
value: string;
paymentCondition: string;
checker: string;
approver: string;
product: string;
issueDate: string;
status: string;
activity: string;
comments: string;
installments: string[];
}
}
you can use JSON2TS to check