The type 'Item' cannot be assigned to type 'ReactNode'

Question

The type 'Item' cannot be assigned to type 'ReactNode'

I'm having trouble understanding the meaning of this error. I've created a Type for an array of items where each item is a string.

Interestingly, when I enclose the listItem within an empty fragment, the error disappears. Is there something I'm overlooking? Each item should be a string only within an array of items.

export type Item = {
  listItem: string;
};

import { motion } from 'framer-motion';

import { Item } from '@typings/propTypes';

import { container, item } from '@lib/framer';

const UnorderedList = ({
  listItems,
  htmlClass
}: {
  htmlClass: string;
  listItems: Item[];
}) => (
  <motion.ul
    variants={container}
    initial="hidden"
    animate="show"
    className={`flex flex-col flex-wrap my-6 leading-relaxed ${
      htmlClass ? htmlClass : 'text-white'
    }`}
  >
    {listItems.map((listItem, index) => (
      <motion.li key={index} variants={item} className="flex gap-3">
        {listItem}
      </motion.li>
    ))}
  </motion.ul>
);

export default UnorderedList;

typescript

Answer 1

Answer №1

listItem refers to an object of the Item type, containing a property named listItem which is a string. React does not allow objects as child elements, hence using {listItem} is incorrect. TypeScript catches this error during authoring/compilation before React does so at runtime. Consider using {listItem.listItem}, as strings are acceptable React children.

Here is a simplified example demonstrating the issue:

import React from "react";

export type Item = {
    listItem: string;
};

// Incorrect implementation
const Example1 = ({item}: {item: Item}) => {
    return <div>{item}></div>;
};

// Correct implementation
const Example2 = ({item}: {item: Item}) => {
    return <div>{item.listItem}</div>;
};

Playground link

Wrapping the listItem with an empty fragment resolves the error.

Unfortunately, this action merely masks the issue from TypeScript. The underlying problem persists, and React will display an error:

// Stack Snippets don't support shorthand fragment syntax,
// so we have to use the verbose form here
const Example1 = ({item}: {item: Item}) => {
    return <div><React.Fragment>{item}</React.Fragment></div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example1 item={{listItem: "Hi"}} />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

This will trigger the common runtime error: "Objects are not valid as a React child".

Error: Objects are not valid as a React child (found: object with keys {listItem}).

Answer 2

listItem refers to an object of the Item type, containing a property named listItem which is a string. React does not allow objects as child elements, hence using {listItem} is incorrect. TypeScript catches this error during authoring/compilation before React does so at runtime. Consider using {listItem.listItem}, as strings are acceptable React children.

Here is a simplified example demonstrating the issue:

import React from "react";

export type Item = {
    listItem: string;
};

// Incorrect implementation
const Example1 = ({item}: {item: Item}) => {
    return <div>{item}></div>;
};

// Correct implementation
const Example2 = ({item}: {item: Item}) => {
    return <div>{item.listItem}</div>;
};

Playground link

Wrapping the listItem with an empty fragment resolves the error.

Unfortunately, this action merely masks the issue from TypeScript. The underlying problem persists, and React will display an error:

// Stack Snippets don't support shorthand fragment syntax,
// so we have to use the verbose form here
const Example1 = ({item}: {item: Item}) => {
    return <div><React.Fragment>{item}</React.Fragment></div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example1 item={{listItem: "Hi"}} />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

This will trigger the common runtime error: "Objects are not valid as a React child".

Error: Objects are not valid as a React child (found: object with keys {listItem}).

The type 'Item' cannot be assigned to type 'ReactNode'

Answer №1

Similar questions

Implement the usage of plainToClass within the constructor function

Enhance Material UI with custom properties

Exploring the versatility of Vue.js through props and scoped slots

Retrieving data from an API using VUEJS3 and Typescript

RxJs Subject: Acquiring the Sender

Tips for defining a distinct series of key-value pairs in typescript

Unlocking new perspectives with a click

Apply a CSS class when the tab key is pressed by the user

Using Angular to Bind Checkbox Value in Typescript

Ways to define a static variable within a function using Typescript

Error in TypeScript in VSCode when using the React.forwardRef function in a functional component

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

npm encountered an issue when attempting to install a package from a local directory: EISDIR: illegal operation on a directory, read

The 'items' property cannot be linked to 'virtual-scroller' as it is not a recognized attribute

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

Leverage Component class variables within the Component hosting environment

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Steps to access a Request object within a Controller

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How come TypeScript tuples support the array.push method?