React Typescript: Array does not map through all items

Question

I have following Table / Array:

If I press the blue button, then all items with the same group as the record should change the Status (Gratis). But now it just change the Value of the Record and all items above it. As an example, if I press the Button on Record No. 1 then itselft and all above (No. 0) get an change of the Status (Gratis).

Following code im using to go through the array and change the Status:

private _updateFreeStatus = (record: QuestionModel): void => {
        fetch('api/Test/UpdateGratisStatus', {
            headers: { 'Content-Type': 'application/json' },
            method: 'PUT',
            body: JSON.stringify({
                'group': record.group,
                'free': record.free,
            })
        });
        this.state.question.map(item => {
            if (item.group === record.group)
            {
                item.free = !record.free;
            }
        });
    }

@larz this.state.question is the Array of Type QuestionModel, and record is the selected record in the table (also Model of QuestionModel) — Feisser
– Feisser, Commented Dec 16, 2021 at 21:32
as it is written fetch makes the request but you don't do anything with it. to read the response, you have to attach a .then handler or use async..await. — Mulan
– Mulan, Commented Dec 16, 2021 at 21:35

Gabriele Petrioli · Accepted Answer · 2021-12-16 21:31:37Z

1

do not mutate the state
create a copy, and use setState

Use

const updatedQuestions = this.state.question.map(item => {
  if (item.group === record.group) {
    return {
       ...item,
       free: !record.free
    }
  }
  return item;
});

this.setState({question: updatedQuestions});

answered Dec 16, 2021 at 21:31

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Collectives™ on Stack Overflow

React Typescript: Array does not map through all items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related