0

For the following typescript code

import React from 'react';
import classnames from 'classnames';
import { ClassValue } from 'classnames/types';


type Props = {
  children: React.ReactNode;
  className: ClassValue;
  tag?: React.ElementType;
  style?: React.CSSProperties;
};

const Component: React.FunctionComponent<Props> = ({ tag: Tag, className, children, ...props }) => (
  <Tag { ...props } className={ classnames('component', className) }>
    { children }
  </Tag>
);

Component.defaultProps = {
  tag: 'div',
};

export default Component;

Why <Tag can be used but not <tag ? Isn't tag the parameter of the function and Tag is the type of it? What syntax being used here?

Jarod
  • 189
  • 9
  • 3
    React components have to be capitalized as a convention: https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components – Dominik Mar 17 '21 at 07:56
  • 1
    The type of `tag` is `React.ElementType` as you write in your code. `tag: Tag` in the props destructuring is a special JavaScript syntax that allows to rename destructured variables. This is TypeScript unrelated. – Johannes Klauß Mar 17 '21 at 09:17
  • @JohannesKlauß Thanks, didn't know the rename destructured variables syntax. – Jarod Mar 19 '21 at 14:38

0 Answers0