Error message: The TypeScript compiler has detected that a variable of type '[][]' cannot be assigned to a variable of type '[]'

I'm facing a challenge with a component that requires an array parameter to display data, along with another array of objects (different type) that also needs to be passed to the component.

The prop type for my component is:

type ComponentType = {
  label: string
  children: ReactNode
}[]

The object type I have is:

type TemplatesType = {
  title: string
  description: string
}[]

I attempted to map this object array but encountered the error 

Type '{ label: string; children: ReactNode; }[][]' is not assignable to type 'ComponentType[]'
:

const mapped: ComponentType[] = templates.map( ( {
  title,
  description
}) => [ {
  label: 'Title',
  children: <>{ title }</>
}, {
  label: 'Description',
  children: <>{ description }</>
} ] )

I also tried using multiple spreads within my object array which resolved the error, but led to incorrect data rendering order (now displaying: 

title, title...., description, description...
instead of the desired rendering order: 
title, description, title, description....
):

const mapped: ComponentType[] = [
  ...templates.map(({ title }) => ({
    label: 'Title',
    children: <>{ title }</>
  })),
  ...templates.map(({ description }) => ({
    label: 'Description',
    children: <>{ description }</>
  })),
]

How can I resolve this error and ensure everything renders in the correct order?

arraystypescript

Answer №1

Have you thought about using the flatMap method instead of map? It could be a better solution for your situation and might help with the [][] issue.

const mappedComponents: ComponentType[] = templates.flatMap( ( {
  title,
  description
}) => [ {
  label: 'Title',
  children: <>{ title }</>
}, {
  label: 'Description',
  children: <>{ description }</>
} ] )

Answer №2

It is important to distinguish between a single item and multiple items when dealing with types. Your ComponentType is already set as an array, so defining const mapped: ComponentType[] implies expecting "array of arrays". This is the issue that TypeScript warns about.

type ComponentItem = {
  label: string
  children: ReactNode
};

type ComponentItems = ComponentItem[];

type TemplateItem = {
  title: string
  description: string
};

type TemplateItems = TemplateItem[];

const mapped: ComponentItems = templates.flatMap(({ title, description }) => [{
  label: 'Title',
  children: title,
}, {
  label: 'Description',
  children: title,
}]);

Answer №3

A multidimensional array is being created in this code snippet:

const maped: ComponentType[] = templates.map( ( {
  title,
  description
}) => [ {
  label: 'Title',
  children: <>{ title }</>
}, {
  label: 'Description',
  children: <>{ description }</>
} ] )

Rather than returning [{label: 'Title', cihldren:....}], it can be simplified to:

templates.map( ( {
  title,
  description
}) => ( {
  label: title,
  children: <>{ title }</>
}) )

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

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

Many examples use the Observable.subscribe() function in AngularIO. However, I have only seen anonymous functions being used like this: bar().subscribe(data => this.data = data, ...); When I try to use a function from the same class like this: update ...

javascriptangulartypescriptthissubscribe

What is the best way to access a specific section of an array?

When dealing with an object byte[], we often need to work with different parts of it. For instance, in my case, I receive a byte[] from the wire. The first 4 bytes represent the length of the message, followed by another 4 bytes indicating the type of the ...

javaarraysprotocol-bufferszero-copy

Filling Arrays Using Nested Loops in Bash

I am intrigued by the following scenario: array1=(file1 file2 file3) array2=() for i in ${array1[@]} do find . -name $i -type f -print0 2>/dev/null | \ while read -d '' -r file do array2+=( $file ) ...

arraysbashnested-loops

mysql2 result inconsistencies

I am fairly new to the world of MySQL and backend development, so please excuse me if this question seems basic. Currently, I am utilizing node/mysql2 for interacting with a MySQL database. The connection is established using a promisified connection pool ...

javascriptmysqlnode.jsarraysobject

Typescript Algorithm - Node Tree: A unique approach combining algorithmic concepts and

I am dealing with a json data in raw format that is unsorted. Here is a snippet of the data: [ { "level": 1, "id": 34, "name": "example-name", "father_id": 10 }, ... ] My goal is to o ...

typescriptalgorithmtree

Incorporate FontAwesome global components into your Vue project using TypeScript

Hey there, I'm a TypeScript newbie and looking to incorporate FontAwesome icons into my Vue 3 App. Here's the setup: Here is my main.ts : import Vue, { createApp } from 'vue'; import './registerServiceWorker'; import { librar ...

typescriptvue.jsfont-awesome

Using event.target.value in find() caused the function to return undefined, but it worked as expected when storing the value in

I am facing a peculiar issue. I am working with a select component that passes a value called "classID" up to a useState. There is an array mapped over the select component which is sent from a NodeJS API and looks like this: [{classID: 371, teacherID: 1, ...

javascriptnode.jsreactjsarrays

Tips for correctly defining a getter while setting a value with a tuple

I have implemented Zustand in my TS React App to handle the states of dialogs and modals. Here is how I defined the ModalStoreState: type ModalStoreState = { /** * The first argument represents the "name" of the target dialog, while the second argu ...

reactjstypescriptgenericszustand

Save the results of a for loop in an array or variable

Below is a for loop that I'm working on. I want to add the complete output of the loop to an array or variable. for i in $ip do curl -s $i:9200 done Does anyone have any suggestions on how I can accomplish this task? ...

arraysbashvariablesfor-loop

Try utilizing ts-node (or a comparable tool) to import npm packages that are exported using both ESM and CommonJS formats by using the esm import

I need help setting up my project with specific configurations in mind. I want to incorporate TypeScript into my source code. I prefer using ESM exclusively in my source code, like import foo from 'bar'. I do not want any distribution files outs ...

node.jstypescriptes6-modulests-nodenode-tsx

Is it feasible to replicate an error in TypeScript with certain modifications?

Currently, I'm facing a challenge where I need to utilize Sentry.captureException with an error that I have received. However, before doing so, I am attempting to modify the error message. Despite spending considerable time searching for a solution, I ...

javascripttypescriptreact-nativeaxiossentry

I am looking to integrate Firebase app-check into my Angular 12 application. Can anyone guide me on

I have attempted the suggestions provided in this particular inquiry Here is the code snippet I am working with: // firebase-init.ts import firebase from 'firebase/app'; import 'firebase/app-check'; import { environment } from ' ...

angulartypescriptfirebaseangularfireangular-universal

Using {children} in NextJS & Typescript for layout components

I am looking to develop a component for my primary admin interface which will act as a wrapper for the individual screens. Here is the JavaScript code I have: import Header from '../Header' function TopNavbarLayout({ children }) { return ...

typescriptnext.js

The information from the Ajax request does not get properly delivered to the $_POST array

Apologies if this question has been raised before, but none of the responses to other inquiries have provided a solution to my issue. I am currently developing a user login system that utilizes an .ajax() call to my login.php file for user authentication. ...

phpjqueryarraysajaxpost

Connection to 127.0.0.1:443 was refused due to a network error

Can you explain why this request is being made to localhost? { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 443, config: { url: 'https:\\stackoverflow.com/ ...

javascripttypescriptaxios

Having difficulty establishing the state interface and forwarding props to other components in React using TypeScript

I recently started using TypeScript and I'm working on a weather app utilizing the Open Weather API. I'm fetching data from the API, setting the state with the API response (weatherData), but I'm encountering an error in TypeScript when tryi ...

reactjstypescript

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

Currently, I am learning how to implement a Reducer in Redux while using React with TypeScript. I have encountered an issue that I need help with. Below are the action types that I am working with: import { LoginResponseInterface } from "../../interfaces ...

reactjstypescriptreduxreact-redux

Char Array Size Remains Constant (C)

My program seems to be outputting the same size regardless of the length of the array. Can you point out what I might have done incorrectly? char charArray[] = "STRING"; int size = sizeof(charArray) / 2 - 1; printf("%d", size); Output: 3 (I am working ...

arrayscstringprintf

Transform a PHP array into Key-Value pairs array

Seeking assistance as a beginner in PHP, I am encountering a specific problem for which I cannot seem to find a solution. Hopefully, someone here can provide some guidance! The array $myvar is structured like this: Array ( [aid] => Array ( [0] ...

phparrays

Attempting to extract text by utilizing the getText() function in Selenium along with Javascript

Attempting to use the getText() method in Selenium and Javascript, but encountering issues. const {Builder, By, Key, until} = require('selenium-webdriver'); (async function example() { let driver = await new Builder().forBrowser('chrom ...

javascriptnode.jsarraysselenium