Answers for "switch case in jsx"

react switch case

render () {
  return (
    <div>
      <div>
        {/* removed for brevity */}
      </div>
      {
        {
          'foo': <Foo />,
          'bar': <Bar />
        }[param]
      }
      <div>
        {/* removed for brevity */}
      </div>
    </div>
  )
}

switch in react

renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <div>
      <div>
          // removed for brevity
      </div>
      {this.renderSwitch(param)}
      <div>
          // removed for brevity
      </div>
    </div>
  );
}

switch statement react

import * as actionTypes from "../store/actions/actionTypes";

const initialState = {
  counter: 0,
  name: "Ginny",
  tasks: ["cut onion", "drive car"],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.INCREMENT:
      return {
        ...state,
        counter: state.counter + 1,
      };
    case actionTypes.DECREMENT:
      return {
        ...state,
        counter: state.counter - 1,
      };
    case actionTypes.ADD:
      return {
        ...state,
        counter: state.counter + action.value,
      };
    case actionTypes.ADD_TEN:
      return {
        ...state,
        counter: state.counter + action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

switch case in jsx

/* Hint: Use JS IIFE (Immediately invoked function expression) in JSX */

import React from 'react';

import ListView from './ListView';
import TableView from './TableView';

function DataView({
	currView,
	data,
	onSelect,
	onChangeStatus,
	viewTodo,
	editTodo,
	deleteTodo,
}) {
	return (
		<div>
			{(function () {
				switch (currView) {
					case 'table':
						return (
							<TableView
								todos={data}
								onSelect={onSelect}
								onChangeStatus={onChangeStatus}
								viewTodo={viewTodo}
								editTodo={editTodo}
								deleteTodo={deleteTodo}
							/>
						);

					case 'list':
						return (
							<ListView
								todos={data}
								onSelect={onSelect}
								onChangeStatus={onChangeStatus}
								viewTodo={viewTodo}
								editTodo={editTodo}
								deleteTodo={deleteTodo}
							/>
						);

					default:
						break;
				}
			})()}
		</div>
	);
}

export default DataView;