This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import propTypes from 'prop-types' | |
import { render } from 'react-dom' | |
class Span extends React.Component { | |
static propTypes = { | |
children: propTypes.node.isRequired, | |
} | |
render() { | |
return <span>{this.props.children}</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Form = ({ frmref, onSubmit }) => ( | |
<form ref={frmref} onSubmit={onSubmit}> | |
<input name="example" type="text" /> | |
</form> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const SomeComponent = () => ( | |
<span>Example</span> | |
) | |
// and later somewhere in your code | |
<SomeComponent ref={handleRefs} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const todoList = [ | |
{ title: 'Do laundry', completed: true }, | |
{ title: 'Pet kitty', completed: false }, | |
{ title: 'Secret Project', completed: false }, | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const TodoList = () => ( | |
<ul> | |
{todoList.map((item, key) => ( | |
<li key={key}>{item.title} : {String(item.completed)}</li> | |
))} | |
</ul> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const completedStyle = { color: 'green' } | |
const uncompletedStyle = { color: 'red' } | |
const TodoList = () => ( | |
<ul> | |
{todoList.map(({ title, completed }, key) => ( | |
<li key={key}> | |
<span>{completed ? 'o' : 'x'} </span> | |
<span style={completed ? completedStyle : uncompletedStyle}>{title}</span> | |
</li> | |
))} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const completedStyle = { color: 'green' } | |
const uncompletedStyle = { color: 'red' } | |
const Item = ({ title, completed }) => ( | |
<li> | |
<span>{completed ? 'o' : 'x'} </span> | |
<span style={completed ? completedStyle : uncompletedStyle}>{title}</span> | |
</li> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const completedStyle = { color: 'green' } | |
const uncompletedStyle = { color: 'red' } | |
const Item = ({ title, completed }) => ( | |
<li> | |
<span>{completed ? 'o' : 'x'} </span> | |
<span style={completed ? completedStyle : uncompletedStyle}>{title}</span> | |
</li> | |
) | |
const TodoList = () => ( | |
<ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Item = ({ title, completed, check, style, className }) => ( | |
<li className={className}> | |
<span>{check} ({String(completed)}) </span> | |
<span style={style}>{title}</span> | |
</li> | |
) | |
const map = item => ({ | |
...item, | |
check: item.completed? 'o' : 'x', | |
style: item.completed? { color: 'gree' } : { color: 'red' }, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MapArray extends React.Component { | |
static propTypes = { | |
from: propTypes.array.isRequired, | |
children: propTypes.element.isRequired, | |
map: propTypes.func, | |
} | |
static defaultProps = { | |
map: e => e, | |
} | |
shouldComponentUpdate(nextProps) { |