Type '{ name: string; }' is not assignable to type 'ReactNode'

Question

I want to render names that are in the State. But I get this error: Type '{ name: string; }' is not assignable to type 'ReactNode'. I understand that ReactNode can't be assigned to an object, but is there any alternative to ReactNode, or what is the best practice?

Thank you in advance, it is my fist time doing something in React and TypeScript

Here is my code:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { ReactNode } from "react";

interface State {
  monster1: {
    name: string;
  };
  monster2: {
    name: string;
  };
  monster3: {
    name: string;
  };
}

interface Props {}

class App extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      monster1: {
        name: "Linda",
      },

      monster2: {
        name: "Frank",
      },

      monster3: {
        name: "Jacky",
      },
    };
  }

  override render(): JSX.Element {
    {
      return (
        <div className="App">
          <div>
            <h1>{this.state.monster1}</h1>
            <h1>{this.state.monster2}</h1>
            <h1>{this.state.monster3}</h1>
          </div>
        </div>
      );
    }
  }
}

export default App;

Tobias S. · Accepted Answer · 2022-05-13 23:46:10Z

3

this.state.monster1 is an object with a property name. React does not allow you to render objects. You should access the name property (which hold a renderable string) instead:

<h1>{this.state.monster1.name}</h1>
<h1>{this.state.monster2.name}</h1>
<h1>{this.state.monster3.name}</h1>

answered May 13, 2022 at 23:46

Tobias S.

24.3k7 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dovul Over a year ago

Is there any possibility just render some json or something like that? Is there some type for that in react?

Tobias S. Over a year ago

You could always use JSON.stringify() to convert an object to a string and display that

Darren Baldwin · Accepted Answer · 2022-05-13 23:23:15Z

3

You should simply be returning your JSX (not within an object). The reason that ur seeing this error output is because Typescript is essentially saying: "hey you told me that I should expect a JSX.Element to be returned, but you instead are returning something else (aka an object).

With all that said the solution to your issue is:

override render(): JSX.Element {
    return (
        <div className="App">
            <div>
                <h1>{this.state.monster1}</h1>
                <h1>{this.state.monster2}</h1>
                <h1>{this.state.monster3}</h1>
            </div>
        </div>
    );
}

answered May 13, 2022 at 23:23

Darren Baldwin

312 bronze badges

Comments

Aneesh · Accepted Answer · 2022-05-13 23:12:00Z

1

Your render function should directly return the JSX you are trying to render:

override render(): JSX.Element {
    return (
        <div className="App">
            <div>
                <h1>{this.state.monster1}</h1>
                <h1>{this.state.monster2}</h1>
                <h1>{this.state.monster3}</h1>
            </div>
        </div>
    );
}

answered May 13, 2022 at 23:12

Aneesh

1,7256 silver badges14 bronze badges

Collectives™ on Stack Overflow

Type '{ name: string; }' is not assignable to type 'ReactNode'

3 Answers 3

2 Comments

With all that said the solution to your issue is:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

With all that said the solution to your issue is:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related