0

I have created a Template component in React and TypeScript where you could use each section within the Template to render different contents in. For example;

<Template>
    <Template.Main>
        This is the main sub-section within Default template.
    </Template.Main>
    <Template.Footer>
        This is the footer sub-section.
    </Template.Footer>
</Template>

Everything works and renders fine without any error on the console, however there is this TypeScript error "Property Footer does not exist on type FC", but I'm not sure what I'm doing wrong.

Somehow TypeScript does not like how I have chained different sections to the Template component, so I would appreciate if anybody could help me with this.

This is the TEMPLATES.REGIONS constant.

This is the TEMPLATES.REGIONS constants

This is the < Template /> component itself.

enter image description here

This is how is rendered out.

enter image description here

This is how the < Template /> component is used in the main index file.

enter image description here

I have put a demo together in CodeSandbox, but for some reason it doesn't outputs any error over there and it only happens locally!

Demo: https://codesandbox.io/s/react-template-n1qyv

Thank in advance.

FARZAD
  • 85
  • 1
  • 9
  • In your codesandbox, change `App.js` to `App.tsx` – Dennis Vash Apr 16 '21 at 17:30
  • You don't have any code which tells Typescript that you using Dot.Notation, using `Object.values` as you did, happens in run time, Typescript analyses styles at compile time. See duplicate. – Dennis Vash Apr 16 '21 at 17:34
  • Thank you, just edited the App ext to .tsx and yes I can now see the error over on CodeSandbox too. – FARZAD Apr 16 '21 at 17:40

0 Answers0