CODEWITHSUNDEEP
reactjs
Bobby Tables
Bobby Tables

Reputation: 163

TypeError: undefined is not an object - reactjs

I am running some tests on components for a small project, and I keep getting the same error for the one component. When I run the project, everything operates as intended, however when I test I can't get rid of this TypeError: undefined is not an object(this.props.searchResults.map). I am confused by this because, as I said, it runs fine. Is it a problem with the way I'm writing my tests or is there an error in my code? The component is below: 

class Results extends React.Component {
render(){
    const { handleEvent, searchResults } = this.props;
    return(
        <ul className="the-list">
            {this.props.searchResults.map((result, idx) => 
                <ResultItem 
                    key={`${result.trackId}-${idx}`} 
                    trackName={result.trackName} 
                    track={result}
                    handleClick={handleEvent} />
                )};
        </ul>
    );
  }
}

Upvotes: 1

Views: 2905

Answers (2)

Joe Duncan
Joe Duncan

Reputation: 376

It seems like this.props.searchResults is undefined in your test. There are two options here:

1: Define a default prop for searchResults:

Results.defaultProps = {
    searchResults: []
}

2: Define searchResults in your test:

<Results searchResults={[]} />

Upvotes: 1

developer_hatch
developer_hatch

Reputation: 16224

I think it could be because you forget the constructor

class Results extends React.Component {

  constructor(props) {
    super(props);
  }


render(){
    const { handleEvent, searchResults } = this.props;
    return(
        <ul className="the-list">
            {this.props.searchResults.map((result, idx) => 
                <ResultItem 
                    key={`${result.trackId}-${idx}`} 
                    trackName={result.trackName} 
                    track={result}
                    handleClick={handleEvent} />
                )};
        </ul>
    );
  }
}

Upvotes: 0

Related Questions