Morning:
Afternoon:
Sometimes one component needs to update another component’s state. It can’t do that directly, but it can call a method from that other component if it’s available via a prop.
import React from 'react'
import ReactDOM from 'react-dom'
const PartyButton = ({ celebrate, celebrations }) => {
return <button onClick={celebrate}>Party! {celebrations}</button>
}
class App extends React.Component {
constructor() {
super()
this.state = {
celebrations: 0,
}
this.celebrate = this.celebrate.bind(this)
}
celebrate() {
const celebrations = this.state.celebrations + 1
this.setState({ celebrations })
}
render() {
return <PartyButton celebrate={this.celebrate} celebrations={this.state.celebrations} />
}
}
ReactDOM.render(<App />, document.querySelector('main'))
Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
const myObj = {
a: true,
b: 'Destructuring!'
}
let { a, b } = myObj
console.log(a) // => true
console.log(b) // => 'Destructuring!'
Add support for multiple rooms/channels! Hint: The first argument (endpoint) to base.syncState should be different for each room/channel.
Don’t forget to make the sidebar links work!