React TypeError: items.map is not a function componentDidMount/< this.setState({

up vote
0
down vote

favorite

I have stupid mistake.

Than I try to use this url: https://api.unsplash.com/photos?client_id=...&page=1
It's OK

Than I try to use this url: https://api.unsplash.com/search/photos?client_id=...&page=1&query=office
It's failed:

TypeError: items.map is not a function
render
src/App.js:51

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

componentDidMount/<
src/App.js:27

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

My App.js code:

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

Why I get error TypeError: items.map is not a function, then I use prevouse URL it was OK. I want to create a search by new REST API url.

reactjs rest

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
  – Mayank Shukla
  Nov 19 at 12:03
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

I have stupid mistake.

Than I try to use this url: https://api.unsplash.com/photos?client_id=...&page=1
It's OK

Than I try to use this url: https://api.unsplash.com/search/photos?client_id=...&page=1&query=office
It's failed:

TypeError: items.map is not a function
render
src/App.js:51

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

componentDidMount/<
src/App.js:27

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

My App.js code:

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

Why I get error TypeError: items.map is not a function, then I use prevouse URL it was OK. I want to create a search by new REST API url.

reactjs rest

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
  – Mayank Shukla
  Nov 19 at 12:03
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I have stupid mistake.

Than I try to use this url: https://api.unsplash.com/photos?client_id=...&page=1
It's OK

Than I try to use this url: https://api.unsplash.com/search/photos?client_id=...&page=1&query=office
It's failed:

TypeError: items.map is not a function
render
src/App.js:51

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

componentDidMount/<
src/App.js:27

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

My App.js code:

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

Why I get error TypeError: items.map is not a function, then I use prevouse URL it was OK. I want to create a search by new REST API url.

reactjs rest

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

I have stupid mistake.

Than I try to use this url: https://api.unsplash.com/photos?client_id=...&page=1
It's OK

Than I try to use this url: https://api.unsplash.com/search/photos?client_id=...&page=1&query=office
It's failed:

TypeError: items.map is not a function
render
src/App.js:51

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

componentDidMount/<
src/App.js:27

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

My App.js code:

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

Why I get error TypeError: items.map is not a function, then I use prevouse URL it was OK. I want to create a search by new REST API url.

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

  48 |   </div>

  49 | </nav>

  50 | 

> 51 | <div className="row container text-center">

     | ^  52 | {items.map(item => (

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

  24 | fetch('https://api.unsplash.com/search/photos?client_id=ce566471febd4bbaa975c83517a1d9e74e9fd8f309a104de1f5881b07ee936cc&page=1&query=office')

  25 |     .then(res => res.json())

  26 |     .then(json => {

> 27 |         this.setState({

     | ^  28 |             isLoaded: true,

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

import React, { Component } from 'react';

import fetch from 'isomorphic-fetch'

import {

  BrowserRouter as Router,

  Route,

  Link

} from 'react-router-dom'



// const Child = ({match}) => (

//     <div>

//       <h1>ID: {match.params.tag}</h1>

//     </div>

//   )



class App extends Component {

  constructor(props) {

        super(props);

        this.state = {

            items: ,

            isLoaded: false

        }

    }

    componentDidMount() {

        fetch('https://api.unsplash.com/search/photos?client_id=...&page=1&query=office')

            .then(res => res.json())

            .then(json => {

                this.setState({

                    isLoaded: true,

                    items: json

                });

            });

    }

  render() {

    var { isLoaded, items } = this.state;

        if (!isLoaded) {

            return "<div>Loading...</div>";

        }

    return (

      <Router>

      <div className="App">

       <nav className="navbar navbar-light bg-light justify-content-between">

        <div className="container">

          <a className="navbar-brand">MediaPark</a>

          <form className="form-inline">

            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>

            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

          </form>

          </div>

        </nav>



        <div className="row container text-center">

        {items.map(item => (

          <div className="card col-md-4" key="{item.id}">

              <img class="card-img-top" src={item.urls.thumb} alt="{item.id}"></img>

              <div class="card-body">

                  <h5 class="card-title">{item.id}</h5>

                  <p class="card-text">{item.description}</p>

                  <a href={item.urls.raw} class="btn btn-primary">Full image</a>

              </div>

          </div>

          ))}

        </div>

        

      </div>

      </Router>

    );

  }

}



export default App;

reactjs rest

reactjs rest

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

share|improve this question

share|improve this question

asked Nov 19 at 12:00

evaldas.z.o

173

asked Nov 19 at 12:00

evaldas.z.o

173

asked Nov 19 at 12:00

evaldas.z.o

173

173

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
  – Mayank Shukla
  Nov 19 at 12:03
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
  – Mayank Shukla
  Nov 19 at 12:03
  

  
  
  
  

1

1

log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
– Mayank Shukla
Nov 19 at 12:03

log the value of json here: .then(json => { console.log('json', json); this.setState({ isLoaded: true, items: json }); }); and check it should be an array.
– Mayank Shukla
Nov 19 at 12:03

add a comment | 

1 Answer
1

active

oldest

votes

up vote
1
down vote



accepted

If you look at the API Documentation the data you get back from a search is an object looking like below. That means that you have to do the map on the results property. You get back an object and not an array.
So if you just want the results it would probably work doing something like this for you:

this.setState({

  isLoaded: true,

  items: json.results

});

https://unsplash.com/documentation

{

  "total": 133,

  "total_pages": 7,

  "results": [

    {

      "id": "eOLpJytrbsQ",

      "created_at": "2014-11-18T14:35:36-05:00",

      "width": 4000,

      "height": 3000,

      "color": "#A7A2A1",

      "likes": 286,

      "liked_by_user": false,

      "description": "A man drinking a coffee.",

      "user": {

        "id": "Ul0QVz12Goo",

        "username": "ugmonk",

        "name": "Jeff Sheldon",

        "first_name": "Jeff",

        "last_name": "Sheldon",

        "instagram_username": "instantgrammer",

        "twitter_username": "ugmonk",

        "portfolio_url": "http://ugmonk.com/",

        "profile_image": {

          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",

          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",

          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"

        },

        "links": {

          "self": "https://api.unsplash.com/users/ugmonk",

          "html": "http://unsplash.com/@ugmonk",

          "photos": "https://api.unsplash.com/users/ugmonk/photos",

          "likes": "https://api.unsplash.com/users/ugmonk/likes"

        }

      },

      "current_user_collections": ,

      "urls": {

        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",

        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",

        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"

      },

      "links": {

        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",

        "html": "http://unsplash.com/photos/eOLpJytrbsQ",

        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"

      }

    },

    // more photos ...

  ]

}

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374189%2freact-typeerror-items-map-is-not-a-function-componentdidmount-this-setstate%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote



accepted

If you look at the API Documentation the data you get back from a search is an object looking like below. That means that you have to do the map on the results property. You get back an object and not an array.
So if you just want the results it would probably work doing something like this for you:

this.setState({

  isLoaded: true,

  items: json.results

});

https://unsplash.com/documentation

{

  "total": 133,

  "total_pages": 7,

  "results": [

    {

      "id": "eOLpJytrbsQ",

      "created_at": "2014-11-18T14:35:36-05:00",

      "width": 4000,

      "height": 3000,

      "color": "#A7A2A1",

      "likes": 286,

      "liked_by_user": false,

      "description": "A man drinking a coffee.",

      "user": {

        "id": "Ul0QVz12Goo",

        "username": "ugmonk",

        "name": "Jeff Sheldon",

        "first_name": "Jeff",

        "last_name": "Sheldon",

        "instagram_username": "instantgrammer",

        "twitter_username": "ugmonk",

        "portfolio_url": "http://ugmonk.com/",

        "profile_image": {

          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",

          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",

          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"

        },

        "links": {

          "self": "https://api.unsplash.com/users/ugmonk",

          "html": "http://unsplash.com/@ugmonk",

          "photos": "https://api.unsplash.com/users/ugmonk/photos",

          "likes": "https://api.unsplash.com/users/ugmonk/likes"

        }

      },

      "current_user_collections": ,

      "urls": {

        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",

        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",

        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"

      },

      "links": {

        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",

        "html": "http://unsplash.com/photos/eOLpJytrbsQ",

        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"

      }

    },

    // more photos ...

  ]

}

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

add a comment | 

up vote
1
down vote



accepted

If you look at the API Documentation the data you get back from a search is an object looking like below. That means that you have to do the map on the results property. You get back an object and not an array.
So if you just want the results it would probably work doing something like this for you:

this.setState({

  isLoaded: true,

  items: json.results

});

https://unsplash.com/documentation

{

  "total": 133,

  "total_pages": 7,

  "results": [

    {

      "id": "eOLpJytrbsQ",

      "created_at": "2014-11-18T14:35:36-05:00",

      "width": 4000,

      "height": 3000,

      "color": "#A7A2A1",

      "likes": 286,

      "liked_by_user": false,

      "description": "A man drinking a coffee.",

      "user": {

        "id": "Ul0QVz12Goo",

        "username": "ugmonk",

        "name": "Jeff Sheldon",

        "first_name": "Jeff",

        "last_name": "Sheldon",

        "instagram_username": "instantgrammer",

        "twitter_username": "ugmonk",

        "portfolio_url": "http://ugmonk.com/",

        "profile_image": {

          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",

          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",

          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"

        },

        "links": {

          "self": "https://api.unsplash.com/users/ugmonk",

          "html": "http://unsplash.com/@ugmonk",

          "photos": "https://api.unsplash.com/users/ugmonk/photos",

          "likes": "https://api.unsplash.com/users/ugmonk/likes"

        }

      },

      "current_user_collections": ,

      "urls": {

        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",

        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",

        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"

      },

      "links": {

        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",

        "html": "http://unsplash.com/photos/eOLpJytrbsQ",

        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"

      }

    },

    // more photos ...

  ]

}

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

add a comment | 

up vote
1
down vote



accepted

up vote
1
down vote



accepted

If you look at the API Documentation the data you get back from a search is an object looking like below. That means that you have to do the map on the results property. You get back an object and not an array.
So if you just want the results it would probably work doing something like this for you:

this.setState({

  isLoaded: true,

  items: json.results

});

https://unsplash.com/documentation

{

  "total": 133,

  "total_pages": 7,

  "results": [

    {

      "id": "eOLpJytrbsQ",

      "created_at": "2014-11-18T14:35:36-05:00",

      "width": 4000,

      "height": 3000,

      "color": "#A7A2A1",

      "likes": 286,

      "liked_by_user": false,

      "description": "A man drinking a coffee.",

      "user": {

        "id": "Ul0QVz12Goo",

        "username": "ugmonk",

        "name": "Jeff Sheldon",

        "first_name": "Jeff",

        "last_name": "Sheldon",

        "instagram_username": "instantgrammer",

        "twitter_username": "ugmonk",

        "portfolio_url": "http://ugmonk.com/",

        "profile_image": {

          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",

          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",

          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"

        },

        "links": {

          "self": "https://api.unsplash.com/users/ugmonk",

          "html": "http://unsplash.com/@ugmonk",

          "photos": "https://api.unsplash.com/users/ugmonk/photos",

          "likes": "https://api.unsplash.com/users/ugmonk/likes"

        }

      },

      "current_user_collections": ,

      "urls": {

        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",

        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",

        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"

      },

      "links": {

        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",

        "html": "http://unsplash.com/photos/eOLpJytrbsQ",

        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"

      }

    },

    // more photos ...

  ]

}

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

If you look at the API Documentation the data you get back from a search is an object looking like below. That means that you have to do the map on the results property. You get back an object and not an array.
So if you just want the results it would probably work doing something like this for you:

this.setState({

  isLoaded: true,

  items: json.results

});

https://unsplash.com/documentation

{

  "total": 133,

  "total_pages": 7,

  "results": [

    {

      "id": "eOLpJytrbsQ",

      "created_at": "2014-11-18T14:35:36-05:00",

      "width": 4000,

      "height": 3000,

      "color": "#A7A2A1",

      "likes": 286,

      "liked_by_user": false,

      "description": "A man drinking a coffee.",

      "user": {

        "id": "Ul0QVz12Goo",

        "username": "ugmonk",

        "name": "Jeff Sheldon",

        "first_name": "Jeff",

        "last_name": "Sheldon",

        "instagram_username": "instantgrammer",

        "twitter_username": "ugmonk",

        "portfolio_url": "http://ugmonk.com/",

        "profile_image": {

          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",

          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",

          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"

        },

        "links": {

          "self": "https://api.unsplash.com/users/ugmonk",

          "html": "http://unsplash.com/@ugmonk",

          "photos": "https://api.unsplash.com/users/ugmonk/photos",

          "likes": "https://api.unsplash.com/users/ugmonk/likes"

        }

      },

      "current_user_collections": ,

      "urls": {

        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",

        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",

        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",

        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"

      },

      "links": {

        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",

        "html": "http://unsplash.com/photos/eOLpJytrbsQ",

        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"

      }

    },

    // more photos ...

  ]

}

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

share|improve this answer

share|improve this answer

answered Nov 19 at 12:18

weibenfalk

4264

answered Nov 19 at 12:18

weibenfalk

4264

answered Nov 19 at 12:18

weibenfalk

4264

4264

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374189%2freact-typeerror-items-map-is-not-a-function-componentdidmount-this-setstate%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here