daniele-zurico

import React, { createContext, useState, useContext } from "react";

const context = createContext({
  activeTabId: "a",
  changeTab: (id: string) => {}
});

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;

daniele-zurico

import React, { createContext, useState, useContext } from "react";

const context = createContext({
  activeTabId: "a",
  changeTab: (id: string) => {}
});

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;

daniele-zurico

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;
};

const TabPanel = ({ whenActive, children }: any) => {
  const tab = useContext(context);
  return tab.activeTabId === whenActive ? children : null;
};

daniele-zurico

const TabSwitcher = ({ children }: any) => {
  const [activeTabId, setActiveTab] = useState<string>("a");
  const changeTab = (newTabId: any) => {
    setActiveTab(newTabId);
  };

  return (
    <context.Provider
      value={{
        activeTabId: activeTabId,

daniele-zurico

<TabSwitcher>
  <Tab id="a">
    <button>a</button>
  </Tab>
  <Tab id="b">
    <button>b</button>
  </Tab>
  <TabPanel whenActive="a">
    <div>a panel</div>
  </TabPanel>

daniele-zurico

import React, { useState, useReducer } from "react";

const todoListReducer = (
  state: string[],
  action: { type: string; value: string }
) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.value];
    case "REMOVE":

daniele-zurico

const todoListReducer = (
  state: string[],
  action: { type: string; value: string }
) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.value];
    case "REMOVE":
      return state.filter((todo: string) => todo !== action.value);
    default:

daniele-zurico

import React, { useState } from "react";
const Todo = () => {
  const [todoName, setTodoName] = useState("");
  const [todoList, setTodoList] = useState<string[]>([]);

  const inputChangeHandler = (evt: React.ChangeEvent<HTMLInputElement>) => {
    setTodoName(evt.target.value);
  };

  const todoAddHandler = () => {

daniele-zurico

import React from "react";
const expansionPanelContent = props => {
  return <div style={{ border: "1px solid blue" }}>{props.children}</div>;
};
export default expansionPanelContent;

daniele-zurico

const panels = this.state.panels.map(panel => (
  <ExpansionPanel key={panel.key}>
    <ExpansionPanelTitle>{panel.title}</ExpansionPanelTitle>
    <ExpansionPanelContent>{panel.body}</ExpansionPanelContent>
  </ExpansionPanel>
));