Functional Components - KatyaHorton/Udacity-React-practice GitHub Wiki

Use functions to create your components if the only method component has is the render() method.

You can create your Component as:

  • class
  • function

Functional component receive it's properties as the first argument to the function.

Function -Arguments
Component - Props

Class component

class ListContacts extends Component {
	render() {
		return (
			<ol>	
		{this.props.contacts.map((contact) => (
			<li> ... </li>
		))}
			</ol>
		)}}

Stateless functional component

function ListContacts (props) {
	render() {
		return (
			<ol>	
		{props.contacts.map((contact) => (
			<li> ... </li>
		))}
			</ol>
		)}}

Stateless Functional Components:

  1. Take in props as an argument
  2. Return UI
  3. No this keyword
⚠️ **GitHub.com Fallback** ⚠️