Fetch specific data from API ReactJS

Question

I'm trying to fetch specific data from a API, something like that: I have that JSON after response:

{
    "id": 5,
    "url": "http://127.0.0.1:8000/api/article/5/",
    "title": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
    "description": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
    "category": [
        "http://127.0.0.1:8000/api/category/1/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
},
{
    "id": 6,
    "url": "http://127.0.0.1:8000/api/article/6/",
    "title": "NASA Formalizes Efforts To Protect Earth From Asteroids",
    "description": "Last week, NASA annouced a new program called the Planetary Defense Coordination Office (PDCO) which will coordinate NASA's efforts for detecting and tracking near-Earth objects (NEOs), If a large object comes hurting toward our planet...",
    "category": [
        "http://127.0.0.1:8000/api/category/4/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_03_EOUms51.jpg"
},
{
    "id": 7,
    "url": "http://127.0.0.1:8000/api/article/7/",
    "title": "Didi Kuaidi, The Company Beating Uber In China, Opens Its API To Third Party Apps",
    "description": "One day after Uber updated its API to add 'content experiences' for passengers, the U.S company's biggest rival - Didi Kuadii in China - has opened its own platform up by releasing an SDK for developoers and third-parties",
    "category": [
        "http://127.0.0.1:8000/api/category/3/"
    ],
    "image": "http://127.0.0.1:8000/media/article_image/news_02_l5zY4HJ.jpg"
}

And in that API, i have a child called by Category:

 {
    "id": 1,
    "url": "http://127.0.0.1:8000/api/category/1/",
    "name": "POLITICS"
},
{
    "id": 2,
    "url": "http://127.0.0.1:8000/api/category/2/",
    "name": "BUSINESS"
},
{
    "id": 3,
    "url": "http://127.0.0.1:8000/api/category/3/",
    "name": "TECH"
},
{
    "id": 4,
    "url": "http://127.0.0.1:8000/api/category/4/",
    "name": "SCIENCE"
},
{
    "id": 5,
    "url": "http://127.0.0.1:8000/api/category/5/",
    "name": "SPORTS"
}

What i want to do is to render my articles with the POLITICS category, but I'dont know how to do that, Here is what I've done so far.

Method to fetch json:

getItems() {
    this.setState({ 'isLoading': true });

    fetch('http://127.0.0.1:8000/api/article/')
        .then(results => {
            if (results.ok) {
                return results.json();
            } else {
                throw new Error('Something went wrong ...');
            }
        })
        .then(results => this.setState({ 'items': results, 'isLoading': false }))
        .catch(error => this.setState({ error, isLoading: false }));
}

My render method:

render() {
    const { isLoading, error } = this.state;

    if (error) {
        return <p>{error.message}</p>;
    }

    if (isLoading) {
        return <p>Loading ...</p>;
    }
    return (
        <ul>
            {this.state.items.map(function (item, index) {
                console.log(item.category.indexOf("1") != 01)
                if (item.category === 1){
                    return <ContentItem item={item} key={index} />
                }
            })}
        </ul>
    );
}

EDIT: Output from console.log(item) in render:

{id: 5, title: "Obama Offers Hopeful Vision While Nothing Nation's Fears", description: "Obama Offers Hopeful Vision While Nothing Nation's Fears", category: Array(1), image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"}
category: Array(1)
    0: 1
    length: 1
    __proto__: Array(0)
description: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
id: 5
image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
title: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
__proto__: Object

Answer 1

What you are NOT doing, is filtering by id ,

if (item.category === 1){ //You need to add .id here
    return <ContentItem item={item} key={index} />
}

like so:

if (item.category.id === 1){ //.id
    return <ContentItem item={item} key={index} />
}

What you are doing wrong is that you are checking the whole object against the === 1 condition instead of just the property id of the object.