ReactJS(3)Handling Events - Conditional Rendering - List and Keys

ReactJS(3)Handling Events - Conditional Rendering - List and Keys

Handling Events
function ActionLink(){ //component
function handleClick(e){
e.preventDefault(); // return false
console.log(’The link was clicked.');
}

return (
<a href=“#” onClick={handleClick}>Click Me</a>
);
}

Binding the event to this
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}

Conditional Rendering
https://facebook.github.io/react/docs/conditional-rendering.html
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);

let will limit the variable scope
http://cookfront.github.io/2015/05/28/es6-let-const/

class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

handleLoginClick() {
this.setState({isLoggedIn: true});
}

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
}
}

Inline If with && Operator
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
{unreadMessages.length <= 0 &&
<h2>
No new messages
</h2>
}
</div>
);
}

//const messages = ['React', 'Re: React', 'Re:Re: React'];
const messages = [];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

We can inline if and else
{isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )}

Preventing Component from Rendering
function WarningBanner(props) {
if (!props.warn) { return null; }
return ( <div className="warning"> Warning! </div> );
}

if there is warn in props, system will ignore rendering the warning message.

Lists and Keys
https://facebook.github.io/react/docs/lists-and-keys.html

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);

ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);

Basic List Component
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);

Keys
Keys is given to the elements inside the array to give the elements a stable identity.
const todoItems = todos.map((todo) =>
<li key={todo.id}> {todo.text} </li>
);

For the one we do not have a unique ID, we can directly use the index of that list
const todoItems = todos.map((todo, index) =>
<li key={index}> {todo.text} </li>
);

Extracting Components with Keys
Keys Only Be Unique Among Siblings


References:
https://facebook.github.io/react/docs/handling-events.html