How to add items in object - React

Question

I have around 10 similar components on the page with different names. Each component is drawn by for loop and have some buttons and data.

If I click one button on a component it carries out an API call and buttons becomes disable till the the call is in success.

The issue is if I click another button on another component button becomes disable(which is expected) but enables the previously clicked button( not expected) as the setState is changed. How can I make the button only enable when its in their own success state.

That is why I am adding the button names in the state of clickedRunButton making it an object but How to add the items in this object during the API call and remove it during the success of the call.

Instead of adding another item its overwriting it.

    this.state = {
        clickedRunButton:{ pipeName :''}
    }

    onClickRun(params) {        
    const url = `/api/${params}/run`;
    let clickedRunButton = Object.assign({}, 
        this.state.clickedRunButton);    //creating copy of object
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
            clickedRunButton.pipeName = params;  
            clickedRunButton[pipeName] = "run"+params;
            this.setState({
                clickedRunButton
            })
        },

        success: (response) => { 
            if(!response.error) {
                clickedRunButton.pipeName = params;  
                clickedRunButton[pipeName] = '';
                this.setState({
                clickedRunButton
               })
            }
        },

        error: (error) => {
        }
    });
}

Miroslav Glamuzina · Accepted Answer · 2019-03-02 22:34:18Z

1

Take a look at:

clickedRunButton.pipeName = params;

and

clickedRunButton[pipeName] = "run"+params;

pipeName used in clickedRunButton[pipeName] is not defined. This will be causing problems.

You can assign a variable to an index in an object like so:

clickedRunButton[clickedRunButton.pipeName] = "run"+params

Hope this helps

edited Mar 2, 2019 at 22:34

answered Mar 2, 2019 at 3:05

Miroslav Glamuzina

4,5872 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3594118 Over a year ago

Oh actually. What I want to do is create an object where the key is pipeline name and value is "run"+pipeline name. The pipeline name will be params

user3594118 Over a year ago

How to make the key in this.state as params ??

Miroslav Glamuzina Over a year ago

@user3594118 Ahh, I will updat

user3594118 Over a year ago

wow this works. What to do if I have to clear the value ? like in one method i have to set the value back to ''. If I do this in setState it gives me error. ` _getPipelineStatus = (pipelineName) => { fetch(/api/ndp/v1/admin/pipelines/${pipelineName}) .then(res => res.json()) .then( (result) => { this.setState({ clickedRestartButton[pipelineName] : '' }); } ) }`

Miroslav Glamuzina Over a year ago

just set the entire object: this.setState({clickedRunButton})

Collectives™ on Stack Overflow

How to add items in object - React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related