CODEWITHSUNDEEP
react-routermaterial-ui
StuiterSlurf
StuiterSlurf

Reputation: 2572

What does ...{} as any in react?

I was having trouble passing the to to the Link component of react-router-dom in the Tab element of the material-ui core.

I finally came up with this solution: 

import * as React from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { Link } from 'react-router-dom';

interface Props { 
  title?: string;
}
interface State {
   value: number;
}

class NavButtons extends React.Component<Props, State>  {
   constructor(props: Props) {
      super(props);
      this.state = { value: 0 };
   }

   public handleOnChange = (event: any, value: number) => {
      this.setState({ value })
   }

   public render() {

      const {value} = this.state

      return (
        <Tabs value={value} onChange={this.handleOnChange} >
          <Tab label="Home" component={Link} {...{to:"/"} as any} />
          <Tab label="Contact" component={Link} {...{to:"/contact/"} as any} />
        </Tabs>
      )
   }
}

export default NavButtons

The only problem is that I can't seem to find out what ...{} as any does in the documentation of material-ui or react.

Can someone explain this to me? I see a lot of React programmers use it but I have no idea what it does exactly.

Upvotes: 1

Views: 3549

Answers (1)

Marson Mao
Marson Mao

Reputation: 3035

typescript. what is mean: (this as any)

Looks like it's a TypeScript syntax. Adding as any could remove the type checking of {to:"/"} so it won't cause any warning/error.

Upvotes: 1

Related Questions