0

I'm building a search engine with React.js, where I can look for GIPHY gifs, using their API. When I type a word in the search bar, I get this error: Uncaught (in promise) TypeError: props.gifs.map is not a function at GifList (SelectedList.js:19)

The console log returns an array, tough :

import React from 'react';
import GifItem from './SelectedListItem';

const GifList = (props) => {
  console.log(props.gifs); // Logs Array in the console
  const gifItems = props.gifs.map((image) => { // <=======
    return <GifItem key={image.id} gif={image} />
   });

  return (
    <div className="gif-list">{gifItems}</div>
  );
};

export default GifList;

How is fetching the gifs:

import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';

class Root extends React.Component { //Component that will serve as the parent for the rest of the application.

constructor() {
    super();

    this.state = {
        gifs: []
    }
    this.handleTermChange = this.handleTermChange.bind(this)
}

handleTermChange(term) {
   console.log(term);
    let url = 'http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=dc6zaTOxFJmzC';
        fetch(url).
    then(response => response.json()).then((gifs) => {
          console.log(gifs);
          console.log(gifs.length);
          this.setState({
            gifs: gifs
          });
        });
    };  


render() {
    return (
      <div>
        <SearchBar onTermChange={this.handleTermChange} />
        <GifList gifs={this.state.gifs} />
      </div>
    );
}
}

ReactDOM.render( <Root />, document.getElementById('root'));

Any help is appreciated! Thanks! :)

10
  • 1
    Are you sure it's an array? Because TypeError: props.gifs.map is not a function at GifList is telling you it isn't. Commented Feb 6, 2018 at 12:16
  • It returns this: {data: Array(25), pagination: {…}, meta: {…}} data : (25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] meta : {status: 200, msg: "OK", response_id: "5a799ce56f4d51616b4e7eaf"} pagination : {total_count: 6596, count: 25, offset: 0} __proto__ : Object @Andy Commented Feb 6, 2018 at 12:18
  • Well that's an Object, not an Array. Objects don't have .map() Commented Feb 6, 2018 at 12:18
  • 1
    props.gifs.data is probably what you're after. Commented Feb 6, 2018 at 12:19
  • put a typeof in the props Commented Feb 6, 2018 at 12:19

1 Answer 1

2

As per your comment, props.gifs is an object and props.gifs.data is an array. So you need to write

const gifItems = props.gifs && props.gifs.data && props.gifs.data.map((image) => { 
    return <GifItem key={image.id} gif={image} />
});
Sign up to request clarification or add additional context in comments.

8 Comments

Uncaught TypeError: Cannot read property 'map' of undefined. @Shubham Khatri
Provide a check for availability of data. Check the update. Check this answer stackoverflow.com/questions/41509532/…
Now its working, but the gifs are broken @Shubham Khatri
What do you mean by broken
like this: google.pt/…: @Shubham Khatri
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.