render() { return ( <div> <h4>From Component: <u>ChildInput</u></h4> {/* When form is submitted, we call formSubmit function in this class. */} <form onSubmit={this.formSubmit}> {/* Updating keyword on each keystroke */} <input onChange={this.keywordChange} placeholder="Enter keyword" value={this.state.keyword}></input> </form> </div> ) }
const Underline = (props) => { return ( <u>{props.children}</u> ) }
const PPChild = function(props) { console.log(props) return ( <div> <div className="component"> <h4>From Component: <u>Child component</u></h4> <div className="result"> <p>Props being passed down from the Passing Props Parent component to this component is:</p> <p><span className="hilight"> {props.name} </span></p> </div> </div> </div> ) }
render() { var myStyle = { fontSize: 15, textAlign: "right" } return ( <div style={myStyle}> <u>Rahamath S</u> - <a href = "mailto:rahamath18@yahoo.com?subject = Feedback&body = Message">rahamath18@yahoo.com</a> </div> ); }
render() { if(!this.props.user) { return( <h4>Select a user ...</h4> ); } return( <div> <h3><u><strong>{this.props.user.first} {this.props.user.last}</strong></u></h3> <h3>Age: {this.props.user.age}</h3> <h3>Description: {this.props.user.description}</h3> </div> ); }
//Functional component, only shows data function CategoryHeader(props){ return( <tr><td><u>{props.name}</u></td></tr> ); }
const CapCallsComponent= (props) => { const capCallsList = props.dealCapCalls.map((capCall) => { return ( <CapCallModule capCall = {capCall} key = {capCall[0].id} /> ) }); return ( <div className = "div-border"> <u> Capital Calls Information </u><br /> {capCallsList} </div> ) }
render() { return ( <div className="content"> <h1>Activate account</h1> <h3>Please confirm the verification code we've just emailed you at <u>{ this.email && this.email }</u></h3> { !this.state.resend ? <p className="resend" onClick={this.resendEmail.bind(this, { email: this.email })}>Resend email verification code</p> : <p className="resended">Email verification code has been resended</p> } { this.props.errorMessage && this.props.errorMessage.signupResend && <div className="error-container">{ this.props.errorMessage.signupResend }</div> } </div> ) }
const FunctionalComponent = ({ name, onButtonClick, disabled }) => ( <div> <GreetMessage name={name.toUpperCase()} /> <button name={'button'} onClick={() => onButtonClick(name)} /> { disabled ? <em>Sorry { name }, it's not enabled :(</em> : <u>It's enabled { name }! :D</u> } </div> )
const PropsDetails = function(props) { return ( <div className="component"> <h4>From Component: <u>PropertyDetails</u></h4> <div className="result"> <p>Properties being passed down from the Properties component:</p> <p><span className="hilight"> {props.text} </span></p> <p><span className="hilight"> {props.name} </span></p> <p><span className="hilight"> {props.team} </span></p> </div> </div> ) }
function Footer() { return ( <footer className="bg-dark text-white fixed-bottom"> <div className="container py-2"> <div className="row"> <div className="col-12 col-md-3 text-center text-md-left logo"> JM </div> <div className="col-12 col-md-9 title text-center text-md-right"> Todo List: Example Code | <a href="www.josemolinaresume.com" target="_Blank" className="text-white"><u>josemolinaresume.com</u></a> </div> </div> </div> </footer> ) }
render() { return ( <div> <h1> <u>Author name list</u> </h1> {this.state.infos.map((info) => ( <ul> <li> <h3>{info.description}</h3> </li> </ul> ))} </div> ); }
const DefaultPropsDetails = function(props) { return ( <div className="component"> <h4>From Component: <u>{props.component}</u></h4> <div className="result"> <p><span className="hilight"> {props.message} </span></p> </div> </div> ) }
const UnderlinedMessage = () => { const message = 'Hola Mundo'; return ( <div> <u>{message}</u> </div> ); }
render() { return ( <div> <h1> <u>Author name list</u> </h1> {this.state.infos.map((info) => ( <ul> <li> <h3>{info.author}</h3> </li> </ul> ))} </div> ); }