React TypeScript Props Interface for string

Question

I'm trying to pass the title down to the child Modal component

<Modal title='Register'/>

const Modal has the error

Type '(props: PropsWithChildren) => { props: PropsWithChildren; (Missing): any; }' is not assignable to type 'FunctionComponent'. Type '{ props: PropsWithChildren; (Missing): any; }' is missing the following properties from type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)>': type, keyts(2322)

import React from 'react';

interface propsInterface {
    title: string; 
}

const Modal: React.FC<propsInterface> = (props) => {
  return (
    {props.title}
  );
}

export {Modal};

return props.title or wrap with div tag like this return <div>{props.title}</div> — kyun

kyun kyun · Accepted Answer · 2019-09-01T05:32:15

You've just forgotten to return jsx

const Modal: React.FC<propsInterface> = (props) => {
  return (
    props.title
  );
}

OR

const Modal: React.FC<propsInterface> = (props) => {
  return (
    <span>{props.title}</span>
  );
}

React TypeScript Props Interface for string

1 Answers