Add files via upload

Author: cheatsheet1999

React-Day/0002. Accordion Component with All Panel Open/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "accordion",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "react-scripts": "3.0.1"
+  },
+  "devDependencies": {
+    "typescript": "3.8.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

React-Day/0002. Accordion Component with All Panel Open/src/Accordion.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import "./styles.css";
+
+function Accordion(props) {
+  const [panelOpenState, setPanelState] = useState([]);
+
+  const togglePanel = (index) => {
+    setPanelState({
+      ...panelOpenState,
+      [index]: !panelOpenState[index]
+    });
+  };
+
+  return (
+    <React.Fragment>
+      {props.data.map((collapsible, index) => {
+        return (
+          <div className="panel" key={index}>
+            <div className="header" onClick={() => togglePanel(index)}>
+              {collapsible.heading}
+            </div>
+            {panelOpenState[index] === true && (
+              <div className="content">{collapsible.content}</div>
+            )}
+          </div>
+        );
+      })}
+    </React.Fragment>
+  );
+}
+
+export default Accordion;

React-Day/0002. Accordion Component with All Panel Open/src/App.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Accordion from "./Accordion";
+
+const data = [
+  { heading: "Heading 1", content: "Content of first Panel" },
+  { heading: "Heading 2", content: "Content of first Pane2" },
+  { heading: "Heading 3", content: "Content of first Pane3" },
+  { heading: "Heading 4", content: "Content of first Pane4" },
+  { heading: "Heading 5", content: "Content of first Pane5" }
+];
+
+export default function App() {
+  return (
+    <div className="App">
+      <Accordion data={data} />
+    </div>
+  );
+}

React-Day/0002. Accordion Component with All Panel Open/src/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <React.StrictMode>
+    <h2>Accordion Example</h2>
+    <br/>
+    <App />
+  </React.StrictMode>,
+  rootElement
+);

React-Day/0002. Accordion Component with All Panel Open/src/styles.css

@@ -0,0 +1,18 @@
+.App {
+  font-family: sans-serif;
+}
+
+.header {
+  cursor: pointer;
+  padding: 15px;
+  background-color: skyblue;
+}
+
+.content {
+  border: solid 1px skyblue;
+  padding: 15px;
+}
+
+.panel {
+  padding-bottom: 10px;
+}