const populate = () => { if (group) { setName(group.name); setClanChat(group.clanChat || ''); setMembers( group.members.map(({ username, displayName, role }) => ({ username, displayName, role })) ); } }
const UserAdd = () => { const { store: users, actions: { create }} = useContext(UserStoreContext); const [ name, setName ] = useState(""); const user = users[name] || {}; return ( <div> <input type="text" placeholder="name" value={name} onChange={e => { setName(e.target.value); }} /> <button onClick={() => create(name)} disabled={user.loading} >Create</button> </div> ); }
const TextInputScreen = () => { const [name,setName] = useState('') return <View> <Text>Enter password</Text> <TextInput style={style.input} autoCapitalize="none" value={name} onChangeText={newText=>setName(newText)} autoCorrect={false}/> {name.length<5 ? <Text>Password must be longer than 5 characters</Text>:null} </View> }
export default function UseStateHook() { const [name, setName] = useState('MoHo'); function handleChange(e) { setName(e.target.value) } return ( <div> <TheNavbar /> <p>Hello {name}</p> <input onChange={handleChange} /> </div> ) }
const handleNameChanged = e => { setName(e.target.value); }
const ObjectUseState = () => { const [name, setName] = useState({ firstName: '', lastName: '' }) return ( <> <input type="text" value={name.firstName} onChange={ e => setName({ ...name, firstName: e.target.value})}/> <input type="text" value={name.lastName} onChange={e => setName({...name, lastName:e.target.value})} /> <p> firstName: {name.firstName} </p> <p>lastName: {name.lastName}</p> </> ) }
const UseStateExample = () => { const [name, setName] = useState('Yihua'); const [address, setAddress] = useState('Amsterdam'); return ( <Card> <h1> {name} </h1> <h1> {address} </h1> <button onClick={() => setName('Andrei')}>Set Name to Andrei</button> <button onClick={() => setAddress('Canada')}>Set Address</button> </Card> ); }
function HookCounterUseEffectConditional() { const [count, setCount] = useState(0) const [name, setName] = useState('') useEffect(() => { document.title = `clicked ${count} times` console.log('HookCounterUseEffectConditional - updating document title after render') }, [count]) return ( <div> <input type="text" value={name} onChange={e => setName(e.target.value)} /> <button onClick={() => setCount(prevCount => prevCount + 1)}>Click count ({count})</button> </div> ) }
function HookCounter() { const [count, setCount] = useState(0); const [name, setName] = useState(""); useEffect(() => { document.title = `you clicked ${count} times, with text: ${name}`; }, [count, name]); return ( <div> <input onChange={e => setName(e.target.value)} value={name} /> <button onClick={() => setCount(count + 1)}>Count: {count}</button> </div> ); }
function useCounter(count = 0, firstname = "Your Name") { const [counter, setCounter] = useState(count); const [name, setName] = useState(firstname); const increment = () => { setCounter(prevCounter => prevCounter + count); }; const decrement = () => { setCounter(prevCounter => prevCounter - count); }; const setFirstName = theName => { setName(theName); }; return [counter, name, increment, decrement, setFirstName]; }
export default function EfectoHook() { const [count, setCount] = useState(1); const [name, setName] = useState('A'); useEffect(() => { console.log('Efecto apply'); document.title = `Clicked # ${count}`; }); return ( <div> <button onClick={() => setCount(count + 1)}>EFECT HOOK</button> <button onClick={() => setName('B')}>{name}</button> </div> ) }
const populate = () => { if (group) { setName(group.name); setClanChat(group.clanChat || ''); setMembers( group.members.map(({ username, displayName, role }) => ({ username, displayName, role })) ); } }
function handleNameChange(e) { setName(e.target.value); }
function handleNameChange(e) { setName(e.target.value); }
const handleNameChanged = e => { setName(e.target.value); }