Same property of switch case JS

Question

I'm using React and I don't want to reply <ListItem ...> code as many times as the cases are. There is a method to simplify and reduce this code?

   displayToDoList = () => {
        switch (this.state.sorted) {
            case 0:
                return (this.state.todosById.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

            case 1:
                return (this.state.todosByName.map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 2:
                return (this.state.todosByCreatedAt.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;
            case 3:
                return (this.state.todosByCharcacters.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
                break;

        }
    }

I think that there will be a better way than mine.

"better" is inherently opinion based and is therefore off-topic. Otherwise, it's a duplicate of Alternative to the “switch” Statement — Heretic Monkey
– Heretic Monkey, Commented Aug 24, 2020 at 13:20

Ranjeet Eppakayala · Accepted Answer · 2020-08-24 13:02:16Z

1

instead of case 0, 1, 2.. make this.state.sorted = 'todosById','todosByName',..

then just return

displayToDoList = () => {
return (this.state[this.state.sorted].map(todo =>
                    <ListItem
                        key={todo.id}                       
                        plainText={todo.plainText}
                        name={todo.name}/>))
}

answered Aug 24, 2020 at 13:02

Ranjeet Eppakayala

3,0881 gold badge13 silver badges23 bronze badges

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

Comments

Sagi Rika · Accepted Answer · 2020-08-24 13:02:54Z

1

const itemRenderer = todo =>
    <ListItem
        key={todo.id}
        plainText={todo.plainText}
        name={todo.name} />

switch (this.state.sorted) {
    case 0:
        return (this.state.todosById.map(itemRenderer)
    case 1:
        return (this.state.todosByName.map(itemRenderer)
    case 2:
        return (this.state.todosByCreatedAt.map(itemRenderer)
    case 3:
        return (this.state.todosByCharcacters.map(itemRenderer)
}

answered Aug 24, 2020 at 13:02

Sagi Rika

2,9993 gold badges16 silver badges35 bronze badges

1 Comment

daf Over a year ago

exactly what I was about to recommend; you beat me to id (:

Giovanni Esposito · Accepted Answer · 2020-08-24 13:03:15Z

Ciao, I'm thinking something like:

displayToDoList = () => {
        let arrayToUse;
        switch (this.state.sorted) {
            case 0:
                arrayToUse = this.state.todosById;
                break;
            case 1:
                arrayToUse = this.state.todosByName;
                break;
            case 2:
                arrayToUse = this.state.todosByCreatedAt;
                break;
            case 3:
                arrayToUse = this.state.todosByCharcacters;
                break;

        }
        return (arrayToUse.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>))
    }

I don't know if is the best solution, but it was the first thing I thought.

Mohit Yadav · Accepted Answer · 2020-08-24 13:23:52Z

I would suggest more cleaner approach with object map lookup appraoch.

displayToDoList = () => {
    const sortedMap = {
      0: this.state.todosById,
      1: this.state.todosByName,
      2: this.state.todosByCreatedAt,
      3: this.state.todosByCharcacters,
     }
     const todoArr = sortedMap[this.state.sorted] || [];
     return todoArr.map(todo =>
                <ListItem
                    key={todo.id}
                    plainText={todo.plainText}
                    name={todo.name} />);       
}

The lookup time is O(1) here, hence i would prefer it over the array representation provided by domenikk

domenikk · Accepted Answer · 2020-08-24 13:02:46Z

0

It can be simplified like this:

displayToDoList = () => {
    const types = ['todosById', 'todosByName', 'todosByCreatedAt', 'todosByCharcacters'];
    const todos = this.state[types[this.state.sorted]];

    return todos.map(todo =>
        <ListItem
            key={todo.id}
            plainText={todo.plainText}
            name={todo.name}/>
    );
}

answered Aug 24, 2020 at 13:02

domenikk

1,7431 gold badge10 silver badges12 bronze badges

Comments

Prateek Thapa · Accepted Answer · 2020-08-24 13:02:55Z

-1


displayToDoList = () => {

    // key could be id, date, name etc
   const todos = sortTodosBy(todos, key) 

    return todos.map(todo =>
                    <ListItem
                        key={todo.id}
                        plainText={todo.plainText}
                        name={todo.name}/>
        }
    }

answered Aug 24, 2020 at 13:02

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

Same property of switch case JS

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Related