I'm getting a 'Property 'activationDate' does not exist on type 'never'' error when I try to run my code in React, what would be the issue? I'm sure it relates to Typescript.

Edit: Still having issues with the mentor type being any? not sure what this means?

2nd Edit: FOR REFERENCE i'm following this tutorial (/) to make a simple GET request, I just don't know how to convert it to typescript.

const TOKEN_KEY:string = `mpp-tk`;

type mentor = { activationDate: any }


class SamSearch extends React.Component<any>  {

  public state = {
    mentors: mentor[] // or any[]
  }

public ponentDidMount() {
    const token = localStorage.getItem(TOKEN_KEY);
  const config = {
    headers: {
      Authorization : token
    }
  }

axios.get(`http://localhost:8080/findMentorFromSam/001339159`, config)
  .then(res => {
    console.log(res.data);
    const mentors = res.data;
    this.setState({ mentors });
  })


 }



public render(): React.ReactNode {
    const {
      classes
    } = this.props as any & {
      titleComponent?: React.Component
    };
return (

  <Grid container className={classes.test}>
  <ul>
  { this.state.mentors.map(mentor => <li>{mentor.activationDate}</li>)}
  </ul>
  <p>TEST</p>
  </Grid>



   )
  }
}
export default pose(
  withRouter,
  withStyles(styles)
)(SamSearch)

I'm getting a 'Property 'activationDate' does not exist on type 'never'' error when I try to run my code in React, what would be the issue? I'm sure it relates to Typescript.

Edit: Still having issues with the mentor type being any? not sure what this means?

2nd Edit: FOR REFERENCE i'm following this tutorial (https://alligator.io/react/axios-react/) to make a simple GET request, I just don't know how to convert it to typescript.

const TOKEN_KEY:string = `mpp-tk`;

type mentor = { activationDate: any }


class SamSearch extends React.Component<any>  {

  public state = {
    mentors: mentor[] // or any[]
  }

public ponentDidMount() {
    const token = localStorage.getItem(TOKEN_KEY);
  const config = {
    headers: {
      Authorization : token
    }
  }

axios.get(`http://localhost:8080/findMentorFromSam/001339159`, config)
  .then(res => {
    console.log(res.data);
    const mentors = res.data;
    this.setState({ mentors });
  })


 }



public render(): React.ReactNode {
    const {
      classes
    } = this.props as any & {
      titleComponent?: React.Component
    };
return (

  <Grid container className={classes.test}>
  <ul>
  { this.state.mentors.map(mentor => <li>{mentor.activationDate}</li>)}
  </ul>
  <p>TEST</p>
  </Grid>



   )
  }
}
export default pose(
  withRouter,
  withStyles(styles)
)(SamSearch)

• javascript
• reactjs
• typescript

• Can you show the mentor type definition, and what the activationDate is supposed to be as well (if it is a custom type), I suspect somehow one of the mentors elements is of type NEVER that doesn't have the activationDate element on it? – Lukasz Commented Oct 15, 2018 at 20:24
• Can you post the entirety of your React ponent? It might be related to this depending on how you initialized state: stackoverflow./a/52655185/643919 – y2bd Commented Oct 15, 2018 at 20:24
• Have you confirmed that mentor.activationDate is definitely being set? – ash Commented Oct 15, 2018 at 20:25
• updated w/ ponent – kjamp Commented Oct 15, 2018 at 20:34
• ponent cleaned up and updated. – kjamp Commented Oct 15, 2018 at 23:39

3 Answers 3

You'll have to say what type the array mentor is, it should be something like

type Mentor = { activationDate: any }

class SamSearch extends React.Component<any>  {
  public state: { mentors: Mentor[] } = { // or any[]
    mentors: []
  }
  // ...rest of the class
}

public state = {
    mentors: mentor[] // or any[]
}

This is not valid TypeScript - you can't declare types within object literal. Valid way would be:

public state: { mentors: mentor[] } = {
    mentors: []
}

However if you take React into consideration, this is also wrong way and reason why you're getting never - you should use second generic parameter of React.Component<TProps, TState> and set default state like this:

type SamSearchProps = {};
interface SamSearchState {
    mentors: mentor[];
}
class SamSearch extends React.Component<SamSearchProps, SamSearchState> {
    constructor(props: SamSearchProps) {
        super(props);
        this.state = { mentors: [] };
    }

    ~rest of ponent logic~
}

This could be caused by your typescript settings. If you have strict option set to true in tsconfig.json, it means it will check types more, well, strictly :) You have to explicitly check if this.state.mentors are not empty or null.

Also, you can specify Props of Component by writing type Props = {/*props here*/}, then applying it to the class declaration class SamSearch extends React.Component<Props>, so you can avoid crazy stuff like const { classes } = this.props /* Not needed anymore: as any & { titleComponent?: React.Component }; */