TypeError: undefined is not an object - reactjs

Question

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>
    );
  }
}

Joe Duncan · Accepted Answer · 2017-07-08 15:17:47Z

1

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={[]} />

answered Jul 8, 2017 at 15:17

Joe Duncan

3862 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

developer_hatch · Accepted Answer · 2017-07-08 03:42:06Z

0

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>
    );
  }
}

answered Jul 8, 2017 at 3:42

developer_hatch

16.3k3 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

TypeError: undefined is not an object - reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related