lecture9.mdx

import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";

Lecture 9

Finishing up Advanced React!

---

Agenda

Overall: Things you'll run into in Project 2.

• Some syntactical tricks
• More about the key prop
• More about the children prop

---

Props Spreading

const schoolInfo = { school: "UC Berkeley", year: 1868 };

// Both are equivalent!
<School {...schoolInfo} />;
<School school="UC Berkeley" year={1868} />

---

Conditional Rendering

<div>{this.props.name ? <p>{this.props.name}</p> : null}</div>
<div>{this.props.name && <p>{this.props.name}</p>}</div> // Also works

---

Demo

What's up with this anyway?

---

What is this?

// 1. In constructor:
this.onChange = this.onChange.bind(this);
// 2. In the prop:
<input onChange={e => this.onChange(e)} />;
// 3. In the function definition:
onChange = e => {};

---

The key prop

Helps React know what elements need to persist across list reorders

this.state.items.map(item => {
  return <p key={item.id}>{item.name}</p>;
});

---

The children prop

// The JSX between <SomeComponent> tags get passed in as a prop called `children`
<SomeComponent> 
  <Book title="Book 1" />
  <Book title="Book 1" />
</SomeComponent>

---

Find a Project Group!

---

Attendance

https://bit.ly/RDAttendance

this.setState((prevState) => ({viewDropdown: !prevState.viewDropdown})