diff --git a/App.jsx b/App.jsx
index c7d8037..b6dbda9 100644
--- a/App.jsx
+++ b/App.jsx
@@ -1,10 +1,52 @@
 import React from "react";// var React =require("react")
+import Header from "./Components/header.jsx";
+import Footer from "./Components/footer.jsx";
+import MyContent from "./Components/myContent.jsx";
 
 class App extends React.Component{
+    constructor(){
+        super();
+        this.state ={
+            myData:[
+                {
+                    name:"Alice",
+                    age:"25 Yrs",
+                    education:"B. Tech."
+                },
+                {
+                    name:"Bob",
+                    age:"26 Yrs",
+                    education:"M.A."
+                },{
+                    name:"Riya",
+                    age:"29 Yrs",
+                    education:"chjjj"
+                }
+            ]
+        };
+        this.myContentClickListner= this.myContentClickListner.bind(this);
+    }
+
+    myContentClickListner(){
+        console.log("this.arguments: ",arguments,arguments[1].target);
+        let data=this.state.myData;
+        data[arguments[2]].name +="_1";
+        this.setState({
+            myData:data
+        })
+    }
+
+
     render(){
         return (
             <div>
-                Hello World
+                <Header />
+                {
+                    this.state.myData.map((e,i)=>{
+                        return <MyContent key={e.name} myData={e} myFunc={{myContentClickListner:this.myContentClickListner,i}}/>
+                    })
+                }
+                <Footer />
             </div>
         )
     }
diff --git a/Components/custFilter.jsx b/Components/custFilter.jsx
new file mode 100644
index 0000000..febbecf
--- /dev/null
+++ b/Components/custFilter.jsx
@@ -0,0 +1,16 @@
+import React from "react";// var React =require("react")
+
+class CustFilter extends React.Component{
+    render(){
+        let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"};
+        return (
+            <div>
+                <div style={myStyle}>
+                    Hi M footer
+                </div>
+            </div>
+        )
+    }
+}
+
+export default CustFilter;
\ No newline at end of file
diff --git a/Components/footer.jsx b/Components/footer.jsx
new file mode 100644
index 0000000..839c75c
--- /dev/null
+++ b/Components/footer.jsx
@@ -0,0 +1,16 @@
+import React from "react";// var React =require("react")
+
+class Footer extends React.Component{
+    render(){
+        let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"};
+        return (
+            <div>
+                <div style={myStyle}>
+                    Hi M footer
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/Components/header.jsx b/Components/header.jsx
new file mode 100644
index 0000000..7294c16
--- /dev/null
+++ b/Components/header.jsx
@@ -0,0 +1,18 @@
+import React from "react";// var React =require("react")
+
+class Header extends React.Component{
+    render(){
+        let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"};
+        return (
+            <div>
+                <div style={myStyle}>
+                    <span>I m logo</span>
+                    <button className="pull-right">Change Data</button>
+                    <span className="pull-right">I m magic button</span>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Header;
\ No newline at end of file
diff --git a/Components/myContent.jsx b/Components/myContent.jsx
new file mode 100644
index 0000000..a0865c9
--- /dev/null
+++ b/Components/myContent.jsx
@@ -0,0 +1,43 @@
+import React from "react";// var React =require("react")
+
+class MyContent extends React.Component{
+    constructor(){
+        super();
+    }
+    render(){
+        let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"};
+        return (
+            <p onClick={(evnt)=>{this.props.myFunc.myContentClickListner(this,evnt,this.props.myFunc.i)}}>
+                Data from parent<br/>
+                name:{this.props.myData.name},<br/>
+                age:{this.props.myData.age},<br/>
+                education:{this.props.myData.education}
+            </p>
+        )
+    }
+}
+
+/*MyContent.prototype={
+ myData:React.PropTypes.object
+ //myData:React.PropTypes.number
+ //myData:React.PropTypes.bool
+ //myData:React.PropTypes.string.isRequired
+ //myData:React.PropTypes.func
+ //myData:React.PropTypes.array
+ };
+
+
+ MyContent.defaultProps={
+ myData:{
+ name:"ydytdty",
+ age:"25 Yrs",
+ education:"B. Tech."
+ }
+ //myData:React.propTypes.number
+ //myData:React.propTypes.bool
+ //myData:React.propTypes.string.isRequired
+ //myData:React.propTypes.func
+ //myData:React.propTypes.array
+ };*/
+
+export default MyContent;
\ No newline at end of file
diff --git a/index.html b/index.html
index fa83aac..4e06ed3 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>My first React</title>
+    <link rel="stylesheet" href="https://github.com/style/style.css">
 </head>
 <body>
     <div id="app"></div>
diff --git a/readme.md b/readme.md
index b71fcd3..834ab13 100644
--- a/readme.md
+++ b/readme.md
@@ -2,6 +2,8 @@
 
 **Master:**_Hello World_
 
+**multipleComponent:**_Demo fo multiple component_
+
 ##How to run
 > Run following command
 >> `npm i`
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..3831b1c
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,3 @@
+.pull-right{
+    float: right;
+}
\ No newline at end of file