Property drilling example for modal

frontend/src/components/Card.js

@@ -3,7 +3,19 @@ import { Link } from "react-router-dom";
 import "./CardGrid/CardGrid.css"
 
 
-function Card(props) {
+class Card extends component {
+  constructor(props) {
+    super(props)
+    const state = {
+      contents: {
+        // id of the prof story
+      },
+    }
+
+    this.state = state;
+  }
+
+  render() {
   const defaultCardTypeSX ={
     width: 250,
     height: 250,
@@ -13,29 +25,32 @@ function Card(props) {
         opacity: [0.9, 0.8, 0.7],
     },
   }
-  let tempsx = props.sx ? props.sx : defaultCardTypeSX //? is if else
-  if(props.cardType==="careerMap"){
+  let tempsx = this.props.sx ? this.props.sx : defaultCardTypeSX //? is if else
+  if(this.props.cardType==="careerMap"){
   return (
     <div>
       <Link to="/careerinfo">
         <Box sx={tempsx}>
-          <img class = "icon" height= "200vmin" src={props.image} alt="icon"/>
+          <img class = "icon" height= "200vmin" src={this.props.image} alt="icon"/>
         </Box>
       </Link>
-      <h3 class="boxLabel">{props.text}</h3>
+      <h3 class="boxLabel">{this.props.text}</h3>
     </div>
   );
   }else{
     return(
     <div>
-        <Box sx={tempsx}>
-          <img class = "icon" height= "200vmin" src={props.image} alt="icon"/>
+        <Box sx={tempsx} onClick={() => {
+          this.props.displayModal(this.state.contents)
+        }}>
+          <img class = "icon" height= "200vmin" src={this.props.image} alt="icon"/>
         </Box>
-      <h3 class="boxLabel">{props.text}</h3>
+      <h3 class="boxLabel">{this.props.text}</h3>
 
     </div>
     );
   }
 }
+}
 
 export default Card;

frontend/src/components/CardGrid/CardGrid.js

@@ -58,6 +58,7 @@ function CardGrid(props) {
                 sx={tempsx}
                 text={data.careerName}
                 image={data.imageName}
+                displayModal={props.displayModal}
               />
 
             </Grid>
@@ -77,6 +78,7 @@ function CardGrid(props) {
               sx={tempsx}
               text={data.careerName}
               image={data.imageName}
+              displayModal={props.displayModal}
             />
           </Grid>
         );

frontend/src/components/TabCollection/TabCollection.js

@@ -80,7 +80,35 @@ const TabsList = styled(TabsListUnstyled)`
 
 `;
 
-export default function UnstyledTabsCustomized() {
+ class UnstyledTabsCustomized extends component {
+  constructor(props) {
+    super(props)
+    const state = {
+      modalShouldDisplay: false,
+      modalContents: null,
+      displayModal: this.displayModal,
+      closeModal: null,
+    }
+
+    this.state = state;
+  }
+
+  displayModal = (providedContents) => {
+    this.setState({
+      modalShouldDisplay: true,
+      modalContents: providedContents
+    })
+  }
+
+
+  render() {
+    const modal = <div>NO MODAL</div>
+
+    if(this.state.modalShouldDisplay) {
+      modal = this.state.modalContents
+    }
+
+
   return (
 
     <TabsUnstyled defaultValue={0}>
@@ -96,13 +124,17 @@ export default function UnstyledTabsCustomized() {
       </TabPanel>
 
       <TabPanel scrollButtons="auto" value={1}>
+        {modal}
         <ProfessionalForm/>
-        <CardGrid cardType={"storiesCard"}/>
+        <CardGrid cardType={"storiesCard"} displayModal={this.state.displayModal}/>
         </TabPanel>
 
       <TabPanel value={2}>Third content</TabPanel>
 
     </TabsUnstyled>
 
   );
+  }
 }
+
+export default UnstyledTabsCustomized;