CODEWITHSUNDEEP
javascriptreactjstypescript
Marcus Pianco
Marcus Pianco

Reputation: 38

Type '{}' is not assignable to type 'Readonly<IIdeasContainerProps>' Property '...' is missing in type '{}'

I'm new to typescript and am experiencing some issues when I try to run this snippet.

Error

The error message is:

Failed to compile

13,8): Type '{}' is not assignable to type 'Readonly <IIdeasContainerProps>'.   Property 'ideas' is missing in type '{}'.

Code

import axios from 'axios';

import * as React from 'react';

interface IdeasContainerState {

  ideas: Array<any>;

}
interface IIdeasContainerProps {
  ideas: Array<any>;

}

class IdeasContainer extends 
 React.Component<IIdeasContainerProps,IdeasContainerState> {

constructor(props:IIdeasContainerProps) {
    super(props)
    this.state={ideas:this.props.ideas}
    }


render() {
    return (
        <div>
        {this.state.ideas.map((idea:any) => {
          return(
            <div className="tile" key={idea.id} >
              <h4>{idea.title}</h4>
              <p>{idea.body}</p>
            </div>
          )       
        })}
      </div>
    );
}


componentDidMount() {
    axios.get('http://localhost:3001/api/v1/ideas.json')
    .then(response => {
      console.log(response)
      this.setState({ideas: response.data})
    })
    .catch(error => console.log(error))
  }

}
export default IdeasContainer;

Upvotes: 0

Views: 878

Answers (1)

Patrick Roberts
Patrick Roberts

Reputation: 51977

It looks like your error is with your axios call. Use the generic version of axios.get() like this:

axios.get<Array<any>>('...').then(response => {
  // response.data will now be inferred as Array<any> instead of {}
  this.setState({ ideas: response.data })
})

Upvotes: 1

Related Questions