new things

web/modules/custom/ufc/js/src/components/Button.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 
-class Button extends Component {
-  render() {
-    return <button>my button</button>;
-  }
+function Button(props) {
+  return <button className="btn btn-primary"><a href={props.link}>View Fight</a></button>;
 }
 
 export default Button;

web/modules/custom/ufc/js/src/components/FightCard.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { useState, useEffect } from 'react';
+import Button from './Button';
+
+const FightCard = () => {
+  const [fights, setFights] = useState([]);
+  useEffect(() => {
+    fetch('/api/v1/recent-fights')
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        console.log(data);
+        setFights(data);
+      });
+  }, []);
+  return (
+    <div className="d-flex flex-row flex-wrap">
+      {fights.map((fight, index) => (
+        <div key={index} className="card col-md-3">
+          <div className="card-body">
+            <h4>{fight.fighter_one}</h4>
+            <h4>{fight.fighter_two}</h4>
+            <Button link={fight.url} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default FightCard;
+

web/modules/custom/ufc/js/src/index.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Button from './components/Button';
-import Table from './components/Table';
+import FightCard from './components/FightCard';
 
-const container = document.getElementById('react-app');
+const container = document.getElementById('recent-fights');
 const root = createRoot(container);
 
-function FirstFunc(props) {
-  return <h1>Hello from firstFunc</h1>;
-}
-
+root.render(<FightCard />);
 // root.render(<FirstFunc />);
-root.render(<Table type="table-dark table-striped table" />);
+// root.render(<Table type="table-dark table-striped table" />);