state
setState
import React from 'react'
const User = (props) => {
return (
<div>
<p>{props.name}</p>
</div>
)
}
import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'Hakata' }
this.handleInput = this.handleInput.bind(this)
}
handleInput(event) {
this.setState({name: event.target.value})
}
render() {
return (
<div>
<p>{this.state.name}</p>
<input
type="text"
value={this.state.name}
onChange={this.handleInput}
/>
</div>
)
}
}
import React from 'react'
const User = (props) => {
return (
<div>
<p>{props.name}</p>
</div>
)
}
import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'Hakata' }
this.handleInput = this.handleInput.bind(this)
}
handleInput(event) {
this.setState({name: event.target.value})
}
render() {
return (
<div>
<p>{this.state.name}</p>
<input
type="text"
value={this.state.name}
onChange={this.handleInput}
/>
</div>
)
}
}
import React from 'react'
const User = ( ) => {
const name = ??
const setName = ??
function handleInput(event) {
setName(event.target.value)
}
return (
<div>
<p>{name}</p>
<input
type="text"
value={name}
onChange={handleInput}
/>
</div>
)
}
import React, { useState } from 'react'
const User = ( ) => {
const [name, setName] = useState('Hakata')
function handleInput(event) {
setName(event.target.value)
}
return (
<div>
<p>{name}</p>
<input
type="text"
value={name}
onChange={handleInput}
/>
</div>
)
}
this.state = { name: 'Hakata' }
this.setState({name: event.target.value})
import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'Hakata' }
this.handleInput = this.handleInput.bind(this)
}
componentDidMount() {
document.title = this.state.name
}
componentDidUpdate() {
document.title = this.state.name
}
handleInput(event) {
this.setState({name: event.target.value})
}
render() {
return (
<div>
<p>{this.state.name}</p>
<input
type="text"
value={this.state.name}
onChange={this.handleInput}
/>
</div>
)
}
}
import React from 'react'
import { useState } from 'react'
const User = ( ) => {
const [name, setName] = useState('Hakata')
function handleInput(event) {
setName(event.target.value)
}
return (
<div>
<p>{name}</p>
<input
type="text"
value={name}
onChange={handleInput}
/>
</div>
)
}
componentDidMount() {
document.title = this.state.name
}
componentDidUpdate() {
document.title = this.state.name
}
import React from 'react'
import { useState, useEffect } from 'react'
const User = ( ) => {
const [name, setName] = useState('Hakata')
useEffect(() => {
document.title = name
})
function handleInput(event) {
setName(event.target.value)
}
return (
<div>
<p>{name}</p>
<input
type="text"
value={name}
onChange={handleInput}
/>
</div>
)
}
import React from 'react'
import { useState, useEffect } from 'react'
const User = ( ) => {
const [name, setName] = useState('Hakata')
useEffect(() => {
document.title = name
})
function handleInput(event) {
setName(event.target.value)
}
return (
<div>
<p>{name}</p>
<input
type="text"
value={name}
onChange={handleInput}
/>
</div>
)
}
const [name, setName] = useState('Hakata')
useEffect(() => {
document.title = name
})
function handleInput(event) {
setName(event.target.value)
}
{name}
value={name}
onChange={handleInput}
// This is what we call "Custom Hook"
const useUser = (initVal) => {
const [value, setValue] = useState(initVal)
useEffect(() => {
document.title = value
})
function handleChange(event) {
setValue(event.target.value)
}
return { value, onChange: handleChange }
}
const user = useUser('Hakata')
{user.value}
value={user.value}
onChange={user.onChange}
const user = useUser('Hakata')
{user.value}
{...user}
Play Game
Play Game
How?
const Console = () => {
const peer = useWebRTCPeer()
return (
<div>
<h2>
{peer.status} {/*Connected or not*/}
</h2>
</div>
)
}
const Monitor = () => {
const peer = useWebRTCPeer()
return (
<div>
<GameLogicHandler data={peer.receivedData}>
</div>
)
}