const HomePage = () => { return ( <div> <h1>React Slingshot</h1> <h2>Get Started</h2> <ol> <li>Review the <Link to="/fuel-savings">demo app</Link></li> <li>Remove the demo and start coding: npm run remove-demo</li> </ol> </div> ); }
<ol className='repl-prompt-suggestion-list'>
const todoList = props => ( <ol> { props.list.map(todo => { return <li key={todo._id}>{ todo.description }</li> })} </ol> )
React.createClass({ render() { if (! this.props.hands) return(<div>No Hands</div>); return ( <ol> {this.props.hands.map(function(hand) { return <HandData key={hand.key} hand={hand}/>; })} </ol> ); } })
render() { const props = this.props; return ( <ol onClick={this.handleClick}> {range(props.first, props.last + 1).map(year => <li key={year} data-year={year} className={year === props.selected ? 'selected' : ''}> {year} </li> )} </ol> ); }
render() { const results = this.props.list; return( <div className="component"> <ol> {results.map(function(result) { return <li key={result.id}>{result.text}</li>; })} </ol> </div> ) }
render() { return ( <div className="row medium-8 large-7 columns"> <ol className="comment-list block-comments"> </ol> <AddCommentForm addComment={this.addComment}/> <pre>{JSON.stringify(this.state, null, 2)}</pre> </div> ) }
const TodoList = props => ( <ol> {props.todo .filter(item => !item.done) .map((item, index) => ( <li onClick={() => props.toggleTodo(item.id)} key={index}> {item.content} </li> ))} </ol> )
/* This presentational component can just be a Stateless Functional Component. */ const ItemList = props => { return ( <div> <p className="items">Items</p> <ol className="item">{props.items.map((item, index) => <Item key={index} item={item} />)}</ol> </div> ); }
render() { return ( <ol> {this.props.posts.map((post) => { return ( <li key={post.ID}>{post.title}</li> ); })} </ol> ); }
render() { return ( <div> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <div className="container"> <h1>This is my body.</h1> </div> </div> ) }
const Carousel = ({ streams, type, linkToEventShow}) => { return( <ol className={`stream-carousel`} id={`${type}-carousel`}> {streams.map((stream, idx) => ( <CarouselItemContainer stream={stream} type={type} key={`stream-${type}-${idx}`} linkToEventShow={linkToEventShow} /> ))} </ol> ) }
function ListItems(props) { const {items} = props; return ( <div> <p className="items">Items</p> <ol className="item-list"> {items.map((item, index) => <li key={index}>{item}</li>)} </ol> </div> ) }
render () { return ( <ol> { this.props.children.map((item, i) => { return <li key={i}>{item}</li> }) } </ol> ) }
const todoList = props => ( <ol> { props.list.map(todo => { return <li key={todo._id}>{ todo.description }</li> })} </ol> )