1renderSwitch(param) {
2 switch(param) {
3 case 'foo':
4 return 'bar';
5 default:
6 return 'foo';
7 }
8}
9
10render() {
11 return (
12 <div>
13 <div>
14 // removed for brevity
15 </div>
16 {this.renderSwitch(param)}
17 <div>
18 // removed for brevity
19 </div>
20 </div>
21 );
22}
1/* Hint: Use JS IIFE (Immediately invoked function expression) in JSX */
2
3import React from 'react';
4
5import ListView from './ListView';
6import TableView from './TableView';
7
8function DataView({
9 currView,
10 data,
11 onSelect,
12 onChangeStatus,
13 viewTodo,
14 editTodo,
15 deleteTodo,
16}) {
17 return (
18 <div>
19 {(function () {
20 switch (currView) {
21 case 'table':
22 return (
23 <TableView
24 todos={data}
25 onSelect={onSelect}
26 onChangeStatus={onChangeStatus}
27 viewTodo={viewTodo}
28 editTodo={editTodo}
29 deleteTodo={deleteTodo}
30 />
31 );
32
33 case 'list':
34 return (
35 <ListView
36 todos={data}
37 onSelect={onSelect}
38 onChangeStatus={onChangeStatus}
39 viewTodo={viewTodo}
40 editTodo={editTodo}
41 deleteTodo={deleteTodo}
42 />
43 );
44
45 default:
46 break;
47 }
48 })()}
49 </div>
50 );
51}
52
53export default DataView;
1render () {
2 return (
3 <div>
4 <div>
5 {/* removed for brevity */}
6 </div>
7 {
8 {
9 'foo': <Foo />,
10 'bar': <Bar />
11 }[param]
12 }
13 <div>
14 {/* removed for brevity */}
15 </div>
16 </div>
17 )
18}
19
1render() {
2 return (
3 <>
4 {
5 {
6 foo: <Foo />,
7 bar: <Bar />
8 }[param]
9 }
10 </>
11 )
12}
1import * as actionTypes from "../store/actions/actionTypes";
2
3const initialState = {
4 counter: 0,
5 name: "Ginny",
6 tasks: ["cut onion", "drive car"],
7};
8
9const reducer = (state = initialState, action) => {
10 switch (action.type) {
11 case actionTypes.INCREMENT:
12 return {
13 ...state,
14 counter: state.counter + 1,
15 };
16 case actionTypes.DECREMENT:
17 return {
18 ...state,
19 counter: state.counter - 1,
20 };
21 case actionTypes.ADD:
22 return {
23 ...state,
24 counter: state.counter + action.value,
25 };
26 case actionTypes.ADD_TEN:
27 return {
28 ...state,
29 counter: state.counter + action.payload,
30 };
31 default:
32 return state;
33 }
34};
35
36export default reducer;
37