React: Update array entry with button click

Question

I would like to have a code which updates the first entry in my array with a button click.

Does anyone have an idea what the solution could be?

Many thanks in advance,

Nicolas

I already tried the code attached.

class JobBuilder extends Component {
    state = {
        listings: {
            accepted:  [0,0,0,0,0,0,0,0,0,0]
        }
    }
    acceptedHandler = () => {
                    const updatedCount = 1;
                    const updatedAccepted = {
                    ...this.state.listings.accepted        
                    }
                    updatedAccepted[1] = updatedCount;
                } 

    render () {
        return (
            <Aux>
                <JobList 
                    listings={this.state.listings}
                    <button onClick={this.acceptedHandler}>Accept</button> 
            </Aux >
        );
    }
}

After this like updatedAccepted[1] = updatedCount; write this.setState({listings:updatedAccepted}) — iftekhar
– iftekhar, Commented Apr 3, 2019 at 19:08
Possible duplicate of Correct modification of state arrays in ReactJS — JJJ
– JJJ, Commented Apr 3, 2019 at 19:11
Thanks a lot @imk for your answer. Would that not update all elements within listings instead of just the accepted array? — Nicolas O
– Nicolas O, Commented Apr 3, 2019 at 19:14

Abdelkarim EL AMEL · Accepted Answer · 2019-04-03 19:35:09Z

1

The spread operator for arrays is []

updatedAccepted[1] will update the second entry instead of the first one.

Have a look at below code :

 acceptedHandler = () => {
    const updatedCount = 1;
    const clonedListing = {...this.state.listings};
    const updatedAccepted = [...clonedListing.accepted]
    updatedAccepted[0] = updatedCount;

    this.setState({
      listings: {
        ...clonedListing,
        accepted: updatedAccepted
      }
    });
}

Working stackblitz

edited Apr 3, 2019 at 19:35

answered Apr 3, 2019 at 19:15

Abdelkarim EL AMEL

1,5331 gold badge10 silver badges10 bronze badges

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

4 Comments

Nicolas O Over a year ago

Thanks so much - this is the solution. Really appreciate your help!

Nicolas O Over a year ago

Is it possible that this code deletes all other states in listings as well? It correctly updates my listings -> accepted, but seems to delete the other states in listings too.

Abdelkarim EL AMEL Over a year ago

i've updated the code and the stackblitz for this case, can you check ?

Nicolas O Over a year ago

Thanks alot again!

Collectives™ on Stack Overflow

React: Update array entry with button click

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related