kurasaiteja/gist:9dca348e8f397c74f14b530a4f9ea402

## gistfile1.js
*/Head.js*/
import React from 'react';

const head = (props) => {
	return(

		<p>I'm {props.name}.Welcome! </p>

		)
}
export default head;

/*Person.js*/
import React from 'react';

const person = (props) => {
	return(
		<div>
		<p>I'm {props.name} and i'm {props.age} years old. </p>
		<p>{props.children}</p>
		<input type="text" onChange={props.changed}/>
		</div>
		)
}
export default person;

/*App.js*/
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
import Head from './Person/Head';
class App extends Component {
  state={
            persons:[
            {name:'Max',age:'28'},
            {name:'teja',age:'20'},
            {name:'Schwarz',age:'30'}
            ],
            showPersons:false,
            heads:[
            {name:''}]
    }
    switchNameHandler=()=>{
      this.setState( {
        persons:[
            {name:'Maxmillan',age:'28'},
            {name:'tejaaaaa',age:'20'},
            {name:'Schwarz',age:'30'}
            ]})
      }
      setName=(event)=>{
        this.setState({
          heads:[
          {name:event.target.value}
          ]})
      }

    nameChangedHandler=(event)=>{
      this.setState( {
        persons:[
            {name:'Max',age:'28'},
            {name:'teja',age:'20'},
            {name:event.target.value,age:'30'}
            ]})
      }
    togglePersonsHandler=()=>{
      const doesShow=this.state.showPersons;
      this.setState({showPersons: !doesShow});
          }
  render() {
    const style={
      backgroundcolor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
     };

    return (
      <div className="App">

        <h1>Heyyy I'm Teja</h1>
        <button onClick={this.togglePersonsHandler} style={style}>Switch Name</button>
        { this.state.showPersons ?
          <div>
          <Head
        name={this.state.heads[0].name}/>
        <Person
           name={this.state.persons[0].name}
           age={this.state.persons[0].age}/>
        <Person
           name={this.state.persons[1].name}
           age={this.state.persons[1].age}
           changed={this.nameChangedHandler}/>
        <Person
           name={this.state.persons[2].name}
           age={this.state.persons[2].age}
           changed={this.setName}>
           My hobbies:Pulihora</Person>
        </div>:null
        }
        </div>
          );
    //return React.createElement('div', {className:'App'}, React.createElement('h1', null, 'Heyy I\'m Teja'))
  }

}
export default App;
	/Head.js/
	import React from 'react';

	const head = (props) => {
	return(

	<p>I'm {props.name}.Welcome! </p>

	)
	}
	export default head;

	/Person.js/
	import React from 'react';

	const person = (props) => {
	return(
	<div>
	<p>I'm {props.name} and i'm {props.age} years old. </p>
	<p>{props.children}</p>
	<input type="text" onChange={props.changed}/>
	</div>
	)
	}
	export default person;

	/App.js/
	import React, { Component } from 'react';
	import './App.css';
	import Person from './Person/Person';
	import Head from './Person/Head';
	class App extends Component {
	state={
	persons:[
	{name:'Max',age:'28'},
	{name:'teja',age:'20'},
	{name:'Schwarz',age:'30'}
	],
	showPersons:false,
	heads:[
	{name:''}]
	}
	switchNameHandler=()=>{
	this.setState( {
	persons:[
	{name:'Maxmillan',age:'28'},
	{name:'tejaaaaa',age:'20'},
	{name:'Schwarz',age:'30'}
	]})
	}
	setName=(event)=>{
	this.setState({
	heads:[
	{name:event.target.value}
	]})
	}

	nameChangedHandler=(event)=>{
	this.setState( {
	persons:[
	{name:'Max',age:'28'},
	{name:'teja',age:'20'},
	{name:event.target.value,age:'30'}
	]})
	}
	togglePersonsHandler=()=>{
	const doesShow=this.state.showPersons;
	this.setState({showPersons: !doesShow});
	}
	render() {
	const style={
	backgroundcolor: 'white',
	font: 'inherit',
	border: '1px solid blue',
	padding: '8px',
	cursor: 'pointer'
	};

	return (
	<div className="App">

	<h1>Heyyy I'm Teja</h1>
	<button onClick={this.togglePersonsHandler} style={style}>Switch Name</button>
	{ this.state.showPersons ?
	<div>
	<Head
	name={this.state.heads[0].name}/>
	<Person
	name={this.state.persons[0].name}
	age={this.state.persons[0].age}/>
	<Person
	name={this.state.persons[1].name}
	age={this.state.persons[1].age}
	changed={this.nameChangedHandler}/>
	<Person
	name={this.state.persons[2].name}
	age={this.state.persons[2].age}
	changed={this.setName}>
	My hobbies:Pulihora</Person>
	</div>:null
	}
	</div>
	);
	//return React.createElement('div', {className:'App'}, React.createElement('h1', null, 'Heyy I\'m Teja'))
	}

	}
	export default App;