Final Tested Build of Headless Drupal

1 files changed, 48 insertions, 0 deletions

diff --git a/Headless-Drupal-A -PWA-with-Drupal-and-React-Js-by-Fahad-Israr/Front End/src/App.js b/Headless-Drupal-A -PWA-with-Drupal-and-React-Js-by-Fahad-Israr/Front End/src/App.js
new file mode 100644
index 0000000..4a2715d
--- /dev/null
+++ b/Headless-Drupal-A -PWA-with-Drupal-and-React-Js-by-Fahad-Israr/Front End/src/App.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+export default class App extends React.Component {
+
+
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      festivals: null ,
+      fetched:false,
+    };
+  }
+
+  fetchFestivals=()=>{
+
+    fetch('http://localhost/drupalmod2/festivals?_format=json', {
+          method: 'get',
+          headers: {'Content-Type': 'application/json'}
+      }).then(response=>response.json()).then(data=>{if(data)this.setState({fetched:true,festivals:data})})
+    }
+
+    componentDidMount=()=>{
+      this.fetchFestivals();
+      
+    }
+  render(){    
+    console.log(this.state.festivals)
+  return (
+    <div className="App">
+      <h1 style={{fontSize:'50px'}}>A PWA with Headless Drupal</h1>
+       <h1>Festivals</h1> 
+      {this.state.fetched&&this.state.festivals&&this.state.festivals.map((item)=>{
+        return(<div key={item.nid[0].value} className='festival'>
+        <h2>{item.title[0].value}</h2>
+        <img src={item.field_festival_image[0].url} />
+        {item.body[0].value.substring(3,(item.body[0].value.length-12))}
+        </div>)
+      })}
+      
+    </div>
+  )
+}
+}
+
+