appwebtech/4_creating_elements_by_mapping_functions.html

## 4_creating_elements_by_mapping_functions.html
<!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) =>
	<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"]
	return (
		<div>
			<Welcome firstName="Joe" lastName="Doe"/>
				<ul>
					{nameArray.map(name =>
						<li>{name}</li>
						)}
				</ul>
		</div>
	)
});

ReactDOM.render(
	<App/>,
	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"]
	return (
		<div>
			<Welcome firstName="Joe" lastName="Doe"/>
				<ul>
					{nameArray.map(name =>
						<li>{name}</li>
						)}
				</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) =>
	<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"]
	return (
		<div>
			<Welcome firstName="Joe" lastName="Doe"/>
				<ul>
					{nameArray.map(name =>
						<li>{name}</li>
						)}
				</ul>
		</div>
	)
});

ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);
	<!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) =>
	<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"]
	return (
	<div>
	<Welcome firstName="Joe" lastName="Doe"/>
	<ul>
	{nameArray.map(name =>
	<li>{name}</li>
	)}
	</ul>
	</div>
	)
	});

	ReactDOM.render(
	<App/>,
	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"]
	return (
	<div>
	<Welcome firstName="Joe" lastName="Doe"/>
	<ul>
	{nameArray.map(name =>
	<li>{name}</li>
	)}
	</ul>
	</div>
	)
	});

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