Question 34077 in React native Question posted in
The official React Native documentation can be found here.

Does anyone know how to "clean up" this monstrosity – React native

I am creating an app using React Native in JavaScript.

I have this code.

            let ScoretoStore = (parseInt(TeamAShot) + "A")

            if (End === 2){
                updateScores(ID,found.ScoreEnd1,ScoretoStore)
            } else if (End === 3){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,ScoretoStore)
            } else if (End === 4){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,ScoretoStore)
            } else if (End === 5){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,ScoretoStore)
            } else if (End === 6){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,ScoretoStore)
            } else if (End === 7){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,ScoretoStore)
            } else if (End === 8){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,ScoretoStore)
            } else if (End === 9){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,ScoretoStore)
            } else if (End === 10){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,ScoretoStore)
            } else if (End === 11){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,ScoretoStore)
            } else if (End === 12){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,ScoretoStore)
            } else if (End === 13){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,ScoretoStore)
            } else if (End === 14){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,ScoretoStore)
            } else if (End === 15){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,ScoretoStore)
            } else if (End === 16){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,ScoretoStore)
            } else if (End === 17){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,ScoretoStore)
            } else if (End === 18){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,ScoretoStore)
            } else if (End === 19){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,ScoretoStore)
            } else if (End === 20){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,ScoretoStore)
            } else if (End === 21){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,ScoretoStore)
            } else if (End === 22){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,ScoretoStore)
            } else if (End === 23){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,ScoretoStore)
            } else if (End === 24){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,ScoretoStore)
            } else if (End === 25){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,ScoretoStore)
            } else if (End === 26){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,found.ScoreEnd25,ScoretoStore)
            } else if (End === 27){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,found.ScoreEnd25,
                    found.ScoreEnd26,ScoretoStore)
            } else if (End === 28){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,found.ScoreEnd25,
                    found.ScoreEnd26,found.ScoreEnd27,ScoretoStore)
            } else if (End === 29){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,found.ScoreEnd25,
                    found.ScoreEnd26,found.ScoreEnd27,found.ScoreEnd28,ScoretoStore)
            } else if (End === 30){
                updateScores(ID,found.ScoreEnd1,found.ScoreEnd2,found.ScoreEnd3,found.ScoreEnd4,found.ScoreEnd5,
                    found.ScoreEnd6,found.ScoreEnd7,found.ScoreEnd8,found.ScoreEnd9,found.ScoreEnd10,
                    found.ScoreEnd11,found.ScoreEnd12,found.ScoreEnd13,found.ScoreEnd14,
                    found.ScoreEnd15,found.ScoreEnd16,found.ScoreEnd17,found.ScoreEnd18,found.ScoreEnd19,
                    found.ScoreEnd20,found.ScoreEnd21,found.ScoreEnd22,found.ScoreEnd23,found.ScoreEnd24,found.ScoreEnd25,
                    found.ScoreEnd26,found.ScoreEnd27,found.ScoreEnd28,found.ScoreEnd29,ScoretoStore)

I don’t think further context is needed, but if it is required, please let me know.
How do I clean it up. By that I mean how do I use loops to turn this into maybe a 10 lines piece of code. An exact answer would be appreciated, because I have already tried solving it myself.

Alright, some more context.
The "End" here is referring to round. Like a round in a game.
"found" comes from this:

const found = ScoresState.find(obj => {
        return obj.id === ID;
    });

And here is the ScoresState array in item context.

const ScoresReducer = (ScoresState,ScoresAction) => {
    switch(ScoresAction.type){
        case actionTypes.createScores:
            return [
                ...ScoresState,
                {
                    id: ID,
                    ScoreEnd1: ScoresAction.payload.ScoreEnd1,
                    ScoreEnd2: ScoresAction.payload.ScoreEnd2,
                    ScoreEnd3: ScoresAction.payload.ScoreEnd3,
                    ScoreEnd4: ScoresAction.payload.ScoreEnd4,
                    ScoreEnd5: ScoresAction.payload.ScoreEnd5,
                    ScoreEnd6: ScoresAction.payload.ScoreEnd6,
                    ScoreEnd7: ScoresAction.payload.ScoreEnd7,
                    ScoreEnd8: ScoresAction.payload.ScoreEnd8,
                    ScoreEnd9: ScoresAction.payload.ScoreEnd9,
                    ScoreEnd10: ScoresAction.payload.ScoreEnd10,
                    ScoreEnd11: ScoresAction.payload.ScoreEnd11,
                    ScoreEnd12: ScoresAction.payload.ScoreEnd12,
                    ScoreEnd13: ScoresAction.payload.ScoreEnd13,
                    ScoreEnd14: ScoresAction.payload.ScoreEnd14,
                    ScoreEnd15: ScoresAction.payload.ScoreEnd15,
                    ScoreEnd16: ScoresAction.payload.ScoreEnd16,
                    ScoreEnd17: ScoresAction.payload.ScoreEnd17,
                    ScoreEnd18: ScoresAction.payload.ScoreEnd18,
                    ScoreEnd19: ScoresAction.payload.ScoreEnd19,
                    ScoreEnd20: ScoresAction.payload.ScoreEnd20,
                    ScoreEnd21: ScoresAction.payload.ScoreEnd21,
                    ScoreEnd22: ScoresAction.payload.ScoreEnd22,
                    ScoreEnd23: ScoresAction.payload.ScoreEnd23,
                    ScoreEnd24: ScoresAction.payload.ScoreEnd24,
                    ScoreEnd25: ScoresAction.payload.ScoreEnd25,
                    ScoreEnd26: ScoresAction.payload.ScoreEnd26,
                    ScoreEnd27: ScoresAction.payload.ScoreEnd27,
                    ScoreEnd28: ScoresAction.payload.ScoreEnd28,
                    ScoreEnd29: ScoresAction.payload.ScoreEnd29,
                    ScoreEnd30: ScoresAction.payload.ScoreEnd30,
                }
        ];
        case actionTypes.updateScores:
            return ScoresState.map((e) => {
                if (e.id === ScoresAction.payload.id){
                    return ScoresAction.payload;                    
                } else {
                    return e;
                }
            });
        default:
            return ScoresState;
    };
};

Here is the updateScores function.

const updateScores = (id,ScoreEnd1,ScoreEnd2,ScoreEnd3,ScoreEnd4,ScoreEnd5,ScoreEnd6,ScoreEnd7,ScoreEnd8,ScoreEnd9,ScoreEnd10,
        ScoreEnd11,ScoreEnd12,ScoreEnd13,ScoreEnd14,ScoreEnd15,ScoreEnd16,ScoreEnd17,ScoreEnd18,ScoreEnd19,ScoreEnd20,ScoreEnd21,ScoreEnd22,ScoreEnd23,
        ScoreEnd24,ScoreEnd25,ScoreEnd26,ScoreEnd27,ScoreEnd28,ScoreEnd29,ScoreEnd30,callback) => {
            dispatchSE({type: actionTypes.updateScores, payload:{id,ScoreEnd1,ScoreEnd2,ScoreEnd3,ScoreEnd4,ScoreEnd5,ScoreEnd6,ScoreEnd7,ScoreEnd8,ScoreEnd9,ScoreEnd10,
            ScoreEnd11,ScoreEnd12,ScoreEnd13,ScoreEnd14,ScoreEnd15,ScoreEnd16,ScoreEnd17,ScoreEnd18,ScoreEnd19,ScoreEnd20,ScoreEnd21,ScoreEnd22,ScoreEnd23,
            ScoreEnd24,ScoreEnd25,ScoreEnd26,ScoreEnd27,ScoreEnd28,ScoreEnd29,ScoreEnd30}});
        if (callback) callback();
    };

I would also like to mention the code works perfectly fine as is.

Tags:

2

Answers


  1. 0

    Your found object is badly formatted. Rather than having properties ScoreEnd1, ScoreEnd2, etc, you should fix whatever’s generating it so that it has an array of ScoreEnd values instead. Then all you need to do is slice the array from 0 to End and spread it into the argument list.

    const scoreEnds = found.ScoreEnd.slice(0, End - 1);
const ScoretoStore = parseInt(TeamAShot) + "A";
updateScores(ID, ...scoreEnds, ScoretoStore);

    You could convert the malformed object into an array yourself with something like

    const scoreEnds = Array.from(
  { length: 30 },
  (_, i) => found['ScoreEnd' + (i + 1)]
);

    but it’d be better to fix things so that the bad data structure isn’t created in the first place.

    It looks like your updateScores function has problems too. Since it’s under your control, instead of having so many separate arguments, have just a single one for the ScoreEnds.

    const updateScores = (id, ScoreEnds, callback) => {
  dispatchSE({type: actionTypes.updateScores, payload:{id, ScoreEnds });
  if (callback) callback();
};

    And change the ScoresReducer so that it also doesn’t have so many individual properties, and uses the array instead – and the same for any other user of the ScoreEnd state in your app.

    Login or Signup to reply.
  2. 0

    You should convert found.ScoreEndN to found.ScoreEnd[n] (an array).

    Then you can do a for loop

    for(let i = 2; i < 30; i++){
    if(End == i) updateScores(ID, ...found.ScoreEnd.filter((el, index) => index < i), ScoretoStore);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search