appwebtech/5_invoking_functions_with_key-value-pairs.html

## 5_invoking_functions_with_key-value-pairs.html
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are ", React.createElement("b", null, "Mr. ", props.firstName, " ", props.lastName, ".")),
	React.createElement("p", null, "My friends name are:")
	)
 )

const App = (() => {
	const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"]
	const nameMapper = (() =>
		nameArray.map((name, i) =>
		React.createElement("li", {key: i}, name)
		)
	);
	return (
		React.createElement("div", null,
			React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
				React.createElement("ul", null,
					nameMapper()
				)
		)
	)
});

ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);
</script>


<script id="jsbin-source-javascript" type="text/javascript">import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	<div>
	<h4>Welcome to my homepage.</h4>
	<p>My names are <b>Mr. {props.firstName} {props.lastName}.</b></p>
	<p>My friends name are:</p>
	</div>
 )

const App = (() => {
	const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"]
	const nameMapper = (() =>
		nameArray.map((name, i) =>
		<li key={i}>{name}</li>
		)
	);
	return (
		<div>
			<Welcome firstName="Joe" lastName="Doe"/>
				<ul>
					{nameMapper()}
				</ul>
		</div>
	)
});

ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);</script></body>
</html>

## jsbin.untitled.js
import React from 'react';
import ReactDOM from 'react-dom';

// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are ", React.createElement("b", null, "Mr. ", props.firstName, " ", props.lastName, ".")),
	React.createElement("p", null, "My friends name are:")
	)
 )

const App = (() => {
	const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"]
	const nameMapper = (() =>
		nameArray.map((name, i) =>
		React.createElement("li", {key: i}, name)
		)
	);
	return (
		React.createElement("div", null,
			React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
				React.createElement("ul", null,
					nameMapper()
				)
		)
	)
});

ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	import React from 'react';
	import ReactDOM from 'react-dom';

	// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

	const Welcome = ((props) =>
	React.createElement("div", null,
	React.createElement("h4", null, "Welcome to my homepage."),
	React.createElement("p", null, "My names are ", React.createElement("b", null, "Mr. ", props.firstName, " ", props.lastName, ".")),
	React.createElement("p", null, "My friends name are:")
	)
	)

	const App = (() => {
	const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"]
	const nameMapper = (() =>
	nameArray.map((name, i) =>
	React.createElement("li", {key: i}, name)
	)
	);
	return (
	React.createElement("div", null,
	React.createElement(Welcome, {firstName: "Joe", lastName: "Doe"}),
	React.createElement("ul", null,
	nameMapper()
	)
	)
	)
	});

	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">import React from 'react';
	import ReactDOM from 'react-dom';

	// Props are ideal as they pass data from Parent to Child components and they are accessed by injection

	const Welcome = ((props) =>
	<div>
	<h4>Welcome to my homepage.</h4>
	<p>My names are <b>Mr. {props.firstName} {props.lastName}.</b></p>
	<p>My friends name are:</p>
	</div>
	)

	const App = (() => {
	const nameArray = ["Joe", "Doe", "Jane", "Katumbi", "JoeJoe", "Nameless", "Namemore", "Lilmore", "Lilless"]
	const nameMapper = (() =>
	nameArray.map((name, i) =>
	<li key={i}>{name}</li>
	)
	);
	return (
	<div>
	<Welcome firstName="Joe" lastName="Doe"/>
	<ul>
	{nameMapper()}
	</ul>
	</div>
	)
	});

	ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);</script></body>
	</html>