The 'string[]' type cannot be assigned to the 'string | ParsedUrlQueryInput | null | undefined' type in Next.js and Typescript

I'm facing an issue while attempting to transfer an array of strings from one page to another in Next.js using 

<Link href={{ pathname: "/model", query: data }}>
. The problem arises when the query parameter is red underlined:

Type 'string[]' is not assignable to type 'string | ParsedUrlQueryInput | null | undefined'.
Type 'string[]' is not assignable to type 'ParsedUrlQueryInput'.
Index signature for type 'string' is missing in type 'string[]'.ts(2322)

The requirement is just to pass the data from one page to a button component and then to another page, without needing global access. Should I resolve this error by utilizing useContext? Or should I consider converting the string array into a single string using array.toString(), and then back into an array? Any suggestions would be greatly appreciated.

typescriptnext.js

Answer №1

The query attribute does not support an array of strings. You have the option to provide either a string or an object.

If you wish to pass an array of strings, you can do so by specifying it within a specific querystring:

<Link href={{ pathname: "/model", query: { items } }}>

In your subsequent page, utilize the useRouter hook to access the querystrings labeled as items.

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

Angular2 checkboxes for filtering data

I'm working with an Angular2 grid that showcases an array of Fabrics, each with its own color or fabric type properties. Right now, all Fabrics are displayed in the grid, but I need to implement a series of checkboxes for color and fabric type, along ...

angulartypescriptangular2-formsangular2-pipe

Ensuring uniqueness in an array using Typescript: allowing only one instance of a value

Is there a simple method to restrict an array to only contain one true value? For instance, if I have the following types: array: { value: boolean; label: string; }[]; I want to make sure that within this array, only one value can be set to t ...

javascripttypescript

Retrieve data from an HTML form within an Angular 2 ag-grid component

I'm facing a challenge with incorporating form values from a modal into an ag-grid array in my HTML file. I'm unsure of the process to achieve this. Below is an excerpt from my file.html: <template #addTrainContent let-c="close" let-d="dismi ...

htmlangulartypescriptag-grid

Passing variables from a template to TypeScript using ngFor

Need help passing a variable from a template to typescript using *ngFor loop. Currently, my code looks like this: <select (change)="onregionchange()" data-placeholder="Regions" class="form-control regions-select" id="regions" multiple> <opt ...

angulartypescriptangular2-template

What is the process for embedding a React component within an HTML string and then displaying it using dangerouslySetInnerHTML?

In my NextJs project, I'm dealing with an HTML string fetched from the server that represents a blog post and includes multiple <img> tags. Currently, I render the post as follows: const blogpostHtml = "..." // HTML string from the server retur ...

reactjsnext.js

Validation with React Hooks does not function properly when used on a controlled component

I've recently started using react hook form and I've created a custom component based on material ui's autocomplete. The issue I'm facing is that react hook form isn't validating the field at all. Let me show you how the setup look ...

reactjstypescriptmaterial-uireact-hook-formyup

Refresh AdSense Ads when navigating in Next JS

We have successfully integrated Google AdSense into our Next.JS website, but we are looking to automatically reload ads whenever a new route is accessed. Here is the approach I took: const Advertisement = props => { const { userLoaded, currentUserIsS ...

reactjsnext.jsadsadsense

Tips for submitting a form remotely using Radix Alert Dialog and the form attribute

Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...

cssreactjsnext.jsradix-ui

Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

I am currently using TypeScript version 4.3.5 and Node.js version 14.18.1 in my project. The code I am working on is compiled to target both old and new browsers by setting target=es5 in the tsconfig file. I make use of both Promise.all and Promise.allSett ...

typescriptwebpackpromiseecmascript-5tsconfig

Minimizing initial load times for shared JavaScript in NextJS

Within a larger project, I am utilizing a substantial number of third-party libraries such as firebase, redux, and more specific ones like konvaJS and jimp (only used on select pages). A recent migration to nextJS was aimed at improving website speed and p ...

reactjswebpacknext.js

Comparing Next.js - dynamic imports versus using the await import statement

I am curious about the contrast between dynamic import (a feature of next.js) and await import. I conducted a search online but couldn't find any explanation about this difference. From what I gathered, it seems that dynamic import is used specificall ...

next.jsdynamic-import

At compile time, Typescript runs smoothly, but errors may arise during runtime

Currently, I am delving into learning Typescript and have encountered a snag in my code. Despite searching extensively for a solution, I have been unable to find any relevant material pertaining to my issue. Below is the code snippet in question: <code ...

typescript

Merge arrays values with Object.assign function

I have a function that returns an object where the keys are strings and the values are arrays of strings: {"myType1": ["123"]} What I want to do is merge all the results it's returning. For example, if I have: {"myType1": ["123"]} {"myType2": ["45 ...

javascriptarraystypescriptobject

Is Next.js compatible with CSS caching?

I'm currently working on a project with Next.js (version 12.1.0) and SCSS modules. I've noticed that my CSS seems to be caching extremely aggressively, requiring me to restart the server (npm run next dev) in order to clear it. Has anyone else en ...

javascriptcsssassnext.js

The component prop of Typography in TypeScript does not accept MUI styling

Working with MUI in typescript and attempting to utilize styled from MUI. Encountering an error when passing the component prop to the styled component. The typescript sandbox below displays the issue - any suggestions for a workaround? https://codesandbo ...

reactjstypescriptmaterial-uistyled-components

"What is the best way to calculate the total value of an array in TypeScript, taking into account the property

I'm currently working on a small Angular project that involves managing an array of receipt items such as Coke, Fanta, Pepsi, Juice, etc. Each receipt item has its own price and quantity listed. receiptItems: Array<ReceiptItem>; Here is the st ...

typescriptmath

What is the best way to define a precise return type for a JSX Element?

Is it possible to define a function that returns a Button element and what would the correct return type of the function be? For example: Ex: const clickMeButton = (): Button => { return ( <Button> Click Me </Button& ...

reactjstypescriptmaterial-ui

Ways to retrieve form information from a POST request

I received a POST request from my payment gateway with the following form data: Upon trying to fetch the data using the code snippet below, I encountered errors and gibberish content: this.http .post<any>('https://xyz.app/test', { ti ...

javascriptangulartypescriptionic-framework

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

This piece of code showcases the issue: let someVar: number; const someFunc = async () => { someVar = 1; } await someFunc(); if (someVar == 1) { console.log('It is 1'); } As a result, you will encounter ...

javascripttypescript

Initiate the input change event manually

Struggling with creating a custom counter input component where the input value is controlled by custom increment/decrement buttons. Desired output: Content projection will be used to expose the input for form usage and adding properties like a regular n ...

angulartypescriptangular-directive