Question 291499 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – TS2322: Type Question is not assignable to type ReactNode

This is baffling me, even after reading the TS error.

Error: TS2322: Type  Question  is not assignable to type  ReactNode

enter image description here

export default class TeamProfile extends Component<{ company: Organization }> {
    render() {
        const { company } = this.props;
        const { teamProfile } = company.interview;

        return (
            <div className="all-100">
                <p className="section-heading bold font-22" id="ft-team-profile">
                    Team Profile
                </p>
                <div className="all-100 padding-left-30 align-left">
                    {teamProfile.teamContext.answer && (
                        <div className="all-100 align-left padding-bottom-10">
                            <span className="bold blue">{teamProfile.teamContext.question}</span>
                            <TeamContextAnswer answer={teamProfile.teamContext.answer} className="ft-answer" />
                        </div>
                    )}
                </div>
            </div>
        );
    }
}

export interface TeamProfile {
    teamContext: {
        question: Question;
        answer: Array<string>;
    };
}

export interface Question {
    question: string;
    answer: Array<string>;
    details: Array<string>;
    description: string;
}
Tags:

2

Answers


  1. 0

    teamProfile.teamContext.question isn’t a string or a <SomeComponent /> that react knows how to turn into something displayable. You can explicitly wrap it in JSON.stringify to see what you’ve got there instead.

    <span>{JSON.stringify(teamProfile.teamContext.question)}</span>

    Login or Signup to reply.
  2. 0

    See the type definition of ReactNode:

    type ReactNode =
        | ReactElement
        | string
        | number
        | Iterable<ReactNode>
        | ReactPortal
        | boolean
        | null
        | undefined
        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES];

    teamProfile.teamContext.question is a Question type that is not compatible with ReactNode

    You should use

    <span className="bold blue">
  {teamProfile.teamContext.question.question}
</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search