Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniele Zurico daniele-zurico

View GitHub Profile
View TabSwitcher-final.tsx
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>;
View gist:87bf0b4f7c154dd3dad91060fb9b5c1a
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>;
View TabandTabPanel.tsx
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;
};
View TabSwitcher.tsx
const TabSwitcher = ({ children }: any) => {
const [activeTabId, setActiveTab] = useState<string>("a");
const changeTab = (newTabId: any) => {
setActiveTab(newTabId);
};
return (
<context.Provider
value={{
activeTabId: activeTabId,
View App.ts
<TabSwitcher>
<Tab id="a">
<button>a</button>
</Tab>
<Tab id="b">
<button>b</button>
</Tab>
<TabPanel whenActive="a">
<div>a panel</div>
</TabPanel>
View todo_final.tsx
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":
View todoListReducer.js
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:
View todo.tsx
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 = () => {
View expansionPanelContent.js
import React from "react";
const expansionPanelContent = props => {
return <div style={{ border: "1px solid blue" }}>{props.children}</div>;
};
export default expansionPanelContent;
View App.js
const panels = this.state.panels.map(panel => (
<ExpansionPanel key={panel.key}>
<ExpansionPanelTitle>{panel.title}</ExpansionPanelTitle>
<ExpansionPanelContent>{panel.body}</ExpansionPanelContent>
</ExpansionPanel>
));