const ProfilePage = ({ user }) => { if (!user) return 'Loading...'; return ( <dl> {Object.keys(user).sort().map(key => ( <Fragment key={key}> <dt>{startCase(key)}</dt> <dd>{key === 'updated_at' ? new Date(user[key] * 1000).toString() : user[key]}</dd> </Fragment> ))} </dl> ); }
render(){ return( <div> <dl className=""> <dd>First name</dd> <dl>{this.state.firstName}</dl> </dl> </div> ) }
const CartSummary = props => ( <section> <h3 className="cart-heading">Order Summary</h3> <div className="cart-summary-items"> <Promo apply={props.apply} promos={props.promos} /> <dl> {props.items.map(item => ( <Fragment key={item.label}> <dt>{item.label}</dt> <dd>{item.value}</dd> </Fragment> ))} </dl> </div> </section> )
const CartSummary = ({ cart }) => { return ( <Fragment> <dl className={`row text-right`}> <dt className="col-sm-6">Subtotal</dt> <dd className="col-sm-6">{cart.attributes.order_total.subtotal.formatted}</dd> {cart.attributes.order_total.adjustments.map(adjustment => ( <Fragment key={adjustment.type}> <dt className="col-sm-6">{adjustment.label}</dt> <dd className="col-sm-6">{adjustment.amount.formatted}</dd> </Fragment> ))} <dt className="col-sm-6">Total</dt> <dd className="col-sm-6">{cart.attributes.order_total.total.formatted}</dd> </dl> </Fragment> ) }
renderPhones() { const self = this, state = self.state, obj = state.obj, phones = obj.phones; var index = -1; return phones.map(o => { index++; return ( <dd key={o.key}> <input type="text" name={index > 0 ? "phone-optional" : "phone"} value={o.number} onChange={e => self.handleItemValueChange("phones", o, "number", e.target.value)} /> {index > 0 && <button type="button" className="btn remove" onClick={() => self.removeItem("phones", o)}>Remove</button> } </dd>) }) }
render () { return ( <div> {this.renderHeader()} <dl> <dt>Title</dt> <dd>{this.props.issue.title}</dd> <dt>Body</dt> <dd><textarea value={this.state.body} onChange={this.handleBodyChange} style={textareaStyle} /></dd> </dl> <button disabled={this.state.mode === EditModes.saving} onClick={this.handleSave}>save</button> </div> ) }
render() { const dataOption = Object.keys(this.state.data) .map( (key,index) => <option value={index}> {index+1 +'. ' +key+ ': ' + this.state.data[key]} </option> ) return ( <div> <h2> Github Profile</h2> <ul> <li>{this.state.data.url}</li> <li>{this.state.data.login}</li> <li>{this.state.data['blog']}</li> </ul> <dd><select>{dataOption}</select></dd> </div> ); }
render() { const { message } = this.props; if (!message) return null; return ( <div className={css('animated slideInDown', styles.alert, styles[message.type])}> <a href='#' onClick={this.dismiss}> {Object.keys(message.body).map(field => <dl key={field} className={styles.message}> <dt>{field}</dt> {message.body[field].map(error => <dd key={error}>{error}</dd> )} </dl> )} </a> </div> ); }
render() { console.log("render"); const state = this.state; if (state.hasError) { return ( <div className="error-boundary"> <p>We had a problem with a child:</p> <dl> <dt>Message:</dt> <dd>{state.message}</dd> <dt>Culprit:</dt> <dd>{state.culprit}</dd> <dt>Stack:</dt> <dd>{state.stack}</dd> </dl> </div> ); } return this.props.children; }
const MetaList = (props) => { const areLabelsLeft = props.alignLabels === 'left', layout = areLabelsLeft ? 'vertical' : props.layout, ItemElement = !areLabelsLeft ? 'div' : React.Fragment, getItemElementProps = (item) => { return ItemElement !== React.Fragment ? {className: item.long ? styles['item-long'] : styles.item} : {}; }; return ( <dl className={styles['list-' + layout]}> {props.children.map((item, index) => ( <ItemElement {...getItemElementProps(item)} key={index}> <dt className={styles['label' + (areLabelsLeft ? '-left' : '-top')]}>{item.label}</dt> <dd className={styles['value' + (props.alignValuesRight ? '-right' : '')]}>{item.value}</dd> </ItemElement> ))} </dl> ); }
render() { const { city, geo, street, suite, zipcode } = this.props; return <div className="address col-md-6"> <dl className="details dl-horizontal"> <dt>City:</dt> <dd>{ city }</dd> <dt>Street:</dt> <dd>{ street }</dd> <dt>Suite:</dt> <dd>{ suite }</dd> <dt>Zipcode:</dt> <dd>{ zipcode }</dd> </dl> </div>; }
// The data prop, which is provided by the wrapper below contains, // a `loading` key while the query is in flight and posts when it is ready function MyComponent({data: {loading, peopleToFilms}}) { if (loading) return (<div> Loading... </div>); let people = Object.keys(peopleToFilms); return ( <dl> {people.map(name => ( <div key={name}> <dt>{name}</dt> <dd> {peopleToFilms[name].map(film => ( <div> {film} </div> ))} </dd> </div> ))} </dl> ); }
renderEmails() { const self = this, state = self.state, obj = state.obj, emails = obj.emails; var index = -1; return emails.map(o => { index++; return ( <dd key={o.key}> <input type="text" name={index > 0 ? "email-optional" : "email"} value={o.address} onChange={e => self.handleItemValueChange("emails", o, "address", e.target.value)} /> {index > 0 && <button type="button" className="btn remove" onClick={() => self.removeItem("emails", o)}>Remove</button> } </dd>) }) }