data not corresponding to interface

I am encountering an issue that says 

Type '({ name: string; href: string; icon: IconDefinition; } | { name: string; href: string; icon: IconDefinition; childs: { name: string; href: string; icon: IconDefinition; }[]; })[]' is missing the following properties from type 'navigationItem': name, href, icon, childsts(2739)

and I'm struggling to understand why.

These are my interface definitions

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
}[]
interface dropdown {
  name: string;
  href: string;
  icon: IconDefinition;
}

Here is some sample data for it

 const navItems: navigationItem = [
    { name: "Calendar", href: "/", icon: faBars },
    { name: "Team", href: "/", icon: faBars },
    {
      name: "Projects",
      href: "/",
      icon: faBars,
      childs: [
        { name: "Accueil", href: "/", icon: faBars },
        { name: "Accueil", href: "/", icon: faBars },
      ],
    },
  ];

If anyone can spot where I went wrong, please feel free to point it out :)

reactjstypescriptinterfacenext.js

Answer №1

Incorrect placement of []

Please remove the last [] from the interface

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
} // The [] are not needed here

Insert the [] in the navigationItem type

const navItems: navigationItem[] = [ // Add [] at this point
    { name: "Calendar", href: "/", icon: faBars },
    { name: "Team", href: "/", icon: faBars },
    {
      name: "Projects",
      href: "/",
      icon: faBars,
      childs: [
        { name: "Home", href: "/", icon: faBars },
        { name: "Home", href: "/", icon: faBars },
      ],
    },
];

Answer №2

To make a change, simply delete the square brackets [] from the code snippet below:

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
}// this []

Then, include navigationItem[] in the following line of code:

const navItems: navigationItem[] = {...}

Check out the CodeSandbox demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jest came across a surprising token that it wasn't expecting while working with React and TypeScript in conjunction with Jest and React-testing-L

An unexpected token was encountered by Jest while using React and TypeScript along with Jest and React-testing-Library. Error occurred at: E:\Git\node_modules@mui\x-date-pickers\internals\demo\index.js:1 ({"Object." ...

javascriptreactjstypescriptjestjsreact-testing-library

Dynamic tags in NextJS determined by the database entity

Currently, I am facing an issue with my app in NextJS. When sending a link to a specific page, I am only getting the favicon, title, and description tags displayed. I would like the ability to embed these links in platforms such as WhatsApp or Slack with ...

next.jsseoserver-side-rendering

Retrieve data upon component mounting and deactivate the query in React-query

When navigating to a search result page, query parameters are passed to useQuery. I want the data to be fetched only when the user clicks the "Search" button after changing the search prompt. I attempted to use enabled: false and call refetch() on button ...

reactjstypescriptnext.jsreact-querytanstack

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

In my Next.js project, I have successfully integrated next-auth and now have access to a JWT token and session object: export const { signIn, signOut, auth } = NextAuth({ ...authConfig, providers: [ CredentialsProvider({ async authorize(crede ...

typescriptnext.jsnext-auth

The "in operator" is not compatible with string indexes

Unique Code const example = { one: 'two', three: 'four', }; const keyToRetrieve: string = 'one'; if (keyToRetrieve in example) { console.log(example[keyToRetrieve]); // output: "two" (No Error) } Removing as const doe ...

typescript

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

If I need to update my UI, I can directly pass the data like this: Using HTML Template <li *ngFor="let post of posts; let i = index;"> {{i+1}}) {{post.name}} <button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</butto ...

javascriptangulartypescript

Struggling to integrate Material UI (MUI) into my React application

I have followed all the necessary steps to install materialUI, emotion/react, and emotion/styled in my react app. However, I am encountering an issue where MUI does not seem to work properly. There are no errors displayed on the console or webpage, but not ...

javascriptreactjsmaterial-ui

Select a single option from the group to include in the array

I'm currently developing a new soccer betting application. My goal is to allow users to choose the result of a match - whether it's a win, loss, or draw - and then save that selection in a list of chosen bets. https://i.stack.imgur.com/hO3uV.png ...

javascriptarraysreactjsobject

The elusive 404 error strikes again as the Nginx server frantically searches for the default path 'etc/nginx/html/index.html' within the NextJS application

I've been struggling with a persistent 404 issue for days now and could really use some assistance. My system is CentOS7 (CPanel, VPS) with engintron for the nginx reverse proxy and pm2 to run my next.js application. default.conf server { listen ...

node.jsnginxnext.jscentos7pm2

Can the ngx-chips library be used to alter the language of chips?

Currently, I am working with the ngx-chips library and encountering a particular issue. Here is an image representation of the problem: The challenge I am facing involves updating the language of the chips based on the selection made in a dropdown menu. A ...

javascriptangulartypescriptngx-chips

What is preventing the getters for form errors from functioning in my Angular Reactive Form component template, while a direct reference does work?

I have a question regarding a small issue with an Angular reactive form in a lazily loaded signup module. The code structure is structured as follows: TS get email() { return this.myForm.get('email'); } // While this code works from within th ...

angulartypescriptangular-reactive-formsangular-template-form

Steps to activate a button once the input field has been completed

It's noticeable that the send offer button is currently disabled, I am looking to enable it only when both input fields are filled. Below, I have shared my code base with you. Please review the code and make necessary modifications on stackblitz 1. ...

angulartypescriptformsbootstrap-4bootstrap-modal

When using next-with-apollo, server-side rendering (SSR) is not functional as the request is performed

I am facing an issue with my code as I attempt to utilize https://github.com/lfades/next-with-apollo, next-with-apolo. Despite following the setup, server-side rendering (SSR) is not working for me and it seems like the client call is still being made. If ...

reactjsnext.jsapollo-client

Converting numbers in React Native, leaving only the last four digits untouched

When mapping biomatricData.ninId, the value I am receiving is "43445567665". biomatricData.ninId = 43445567665 My task now is to display only the last 4 digits and replace the rest with "*". I need to format 43445567665 as follows: Like - *******7665 ...

javascriptreactjsreact-nativeecmascript-6

React does not automatically re-render components created with the built-in function

I'm facing some confusion with the behavior in my code: I've created a component that should function as a menu using MaterialUI. The idea is that when a button in the menu is clicked, it becomes "active" and visually reflects this change by set ...

javascriptreactjsmaterial-ui

"Transformed JSON data into state for React JS Components using .map method

I've been working on setting the response of my 'apiRequest' into the Characters component's state. I've managed to log the returned JSON, but I'm struggling with how to use .map to set response.results into State. If anyone ...

jsondictionaryreactjs

In ReactJS, removing the value from Material-UI TextField displays the previously entered text

I have implemented a SearchBar feature in my ReactJS application. Below is the code snippet for the SearchBar: import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react'; import { makeStyles } from '@material-ui/core ...

reactjsmaterial-ui

When implementing useReducer with TypeScript, the error "Argument of type '(type, action) => { state: (...}' is not assignable to parameter of type 'ReducerWithoutAction<any>'" may occur

Recently, I decided to delve into learning TypeScript by building a simple shopping cart application. If you want to check out the code, feel free to visit my GitHub repository: https://github.com/CsarGomez/shopping-cart-reducers-tx I've encountered ...

reactjstypescriptreduceviteuse-reducer

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Passing React props to a component is essential for proper functioning

The following code represents a react component named Start. Its main purpose is to receive a player's name through a form using onSubmit. The player's name is stored in a hook called "player" and then passed as a prop to another component called ...

reactjsreact-hooksreact-router-domrouterprop