Loading onClick Post of Wordpress Category Rest API

Question

I am currently learning react.js and javascript. Today I started to have a look at the Rest API of wordpress. I managed to load and map post from a specific category on to my page. Now I would like to load a different categories on click. However I am kind of stuck. The data for each category can be called via the following link:

http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]= travel http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]= categoryXY

I would like to change the category name based on an onclick event on a button. So for example if someone clicks on the category Car all posts from the WP Category Car are loaded. So I need an onclick event that changes the last part of the url to call the data from this specific category. This is my code so far.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Request from 'superagent';
import _    from 'lodash';


class TestComponent extends Component {

    constructor() {
        super();
        this.state = {};
    }

componentWillMount () {
    var url = "http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]=travel";
    Request.get(url).then((response) => {
        this.setState({
            category: response.body,
            total: response

        });
    });
}



    render() {
        var category = _.map(this.state.category, (website) => {
            return (
                <div>
                    <h2>{website.title.rendered}</h2>
                    <p>{website.content.rendered}</p>
             </div>
             ); 
        });

        return (
            <div>
             <button>Click to load category1</button>
             <button>Click to load category2</button>
             <ul>{category}</ul>
            </div>
        );
    }
}


export default TestComponent;

Thanks for your help.

Answer 1

For anyone that faces a similar problem. I solved it by myself. However be aware this is not a perfect solution since redux is not implemented. I simply used my link structure (params) to call the right category from the Wordpress Rest API

class TestComponent extends Component {

        constructor() {
            super();
            this.state = {};
        }




   componentWillReceiveProps() {
        let category = (this.props.params.data);
        var url = "http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]="+category+"";
        Request.get(url).then((response) => {
            this.setState({
                category: response.body,
                total: response

            });
        });
    }



        render() {



            var category = _.map(this.state.category, (website) => {
                return (
                    <div>

                        <WebsiteItem title={website.title.rendered} description={website.content.rendered} image={website.better_featured_image.source_url} link={website.acf.websitelink}/>
                 </div>
                 ); 
            });

            return (
                <div>

                 <ul>{category}</ul>

                </div>
            );
        }
    }


    export default TestComponent;