Create State Play

src/meta/play-meta.js

@@ -5,6 +5,7 @@ import {
  MovieContainer,
  WhyReact,
  CounterApp,
+States,
 //import play here
 } from "plays";
 
@@ -75,6 +76,18 @@ export const plays = [
  tags: 'JSX, State, Props',
  github: 'murtuzaalisurti',
  featured: true
+ }, {
+ id: 'pl-states', 
+ name: 'States', 
+ description: 'States in Functional Components',
+ component: () => {return <States />},
+ path: '/plays/states',
+ level: 'Beginner',
+ tags: 'Hooks,State,JSX',
+ github: 'Abhishek-90',
+ cover: '',
+ blog: 'https://abhishek-90.github.io/My-Portfolio/',
+ video: ''
  }, //replace new play item here
 ];
 

src/plays/index.js

@@ -6,4 +6,5 @@ export { default as BasicTree } from 'plays/org-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
 export { default as CounterApp } from 'plays/counter/CounterApp';
+export { default as States } from 'plays/states/States';
 //add export here

src/plays/states/States.jsx

@@ -0,0 +1,38 @@
+
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function States() {
+ // Do not remove the below lines. 
+ // The following code is to fetch the current play from the URL
+ const location = useLocation();
+ const { id } = location.state;
+ const play = getPlayById(id);
+
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={play} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div>
+ <h1>Play Details - States</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Pellentesque euismod, urna eu tincidunt consectetur,
+ nisi nunc ultricies nisi, eget consectetur nunc nisi
+ euismod nunc.
+ </p>
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default States;