React -render values onClick of tabs

Question

I have an app that uses axios and that render the values (eg: ID and warehouseName) using map which i put on tabs. Now I want to do is post a state on warehouseID at loadBrandTotal() from the value ID that I get in the map.

So far my code is like this

export default React.createClass({

    getInitialState(){
        return {
            warehouseName: ""
        }
    },

    componentWillMount(){
        this.loadWarehouse();
        this.loadBrandTotal();
    },


    loadWarehouse(){
        var that = this
        var url = api + 'retrieveWarehouseList';
        axios.post(url,
            {
                warehouseName : 'NONE'
            })
        .then(function (response) {
            console.log(response.data);
            that.setState({
              warehouseList : response.data.retrieveWarehouseListResult
            });
          })
        .catch(function (response) {
          console.log(response);
        });
    },

    loadBrandTotal(){
        var that = this
        var url = api + 'retrieveTotalSalesPerBrand';
        axios.post(url,
            {
                 warehouseID : "None"
            })
        .then(function (response) {
            console.log(response.data);
            that.setState({
              totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult
            });
          })
        .catch(function (response) {
          console.log(response);
        });
    },

    render() {
    var wareName = this.state.warehouseList;
    return (
    	<ul className="tabs tabs-transparent">
	        {wareName.map(function(nameoObjects) {
	          return (
	            <li className="tab">
	                <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a>
	            </li>
	          )
	        })}
	    </ul>
   	)}

})

Thanks a lot in advance.

Answer 1

I'm not 100% sure what you're wanting to do, but is it that inside the loadBrandTotal() function you want to post data you've gotten in the loadWarehouse() function? And if so, WHEN are you wanting to do this posting, as it's rendered? On a button click?

Here's an example where each list element has a button that sends the ID value the element got in the map fucntion to the loadBrandTotal() function, where it's posted (see code comments for changes):

// Give the id as an argument to loadBrandTotal
loadBrandTotal(id){
        var that = this
        var url = api + 'retrieveTotalSalesPerBrand';
        axios.post(url,
            {
                 // Post the ID
                 warehouseID : id
            })
        .then(function (response) {
            console.log(response.data);
            that.setState({
              totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult
            });
          })
        .catch(function (response) {
          console.log(response);
        });
    },

    render() {
    var wareName = this.state.warehouseList;
    return (
        <ul className="tabs tabs-transparent">
            {wareName.map(function(nameoObjects) {
              return (
                <li className="tab">
                    <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a>
                    // When clicked, this button sends THIS list object's nameoObject ID to the loadBrandTotal function, where it's posted
                    <button onClick{() => this.loadBrandTotal(nameoObjects.ID)}>Post ID</button>
                </li>
              )
            })}
        </ul>
    )}

So in that example, every list element rendered in the map function includes a button that, when clicked, sends its own nameoObject ID to the loadBrandTotal function, where it's posted and the state is set. Is that the kind of thing you're trying to do?