function TextInput() { const [state, setState] = useState('') return ( <div> <label htmlFor={'my-input'}>Enter text: </label> <input id={'my-input'} type={'text'} value={state} placeholder={'Type here'} onChange={event => { setState(event.target.value) }} /> <br /> <br /> You entered: {state} </div> ) }
// Methods to change state below const handleChangeContinent = (event) => { const name = event.target.name; setState({ ...state, [name]: event.target.value, }); handledata(event.target.value) }
// Accepts props, then passes along props and state to the view // keeping the view agnostic on what is prop and what is state const AppState = ({ title, setInitialStatus }) => { const [{ status }, setState] = useState({ status: Nothing }); const setStatus = status => setState({ status }); useEffect(() => { setInitialStatus(setStatus) }, [setInitialStatus]) return { status, setStatus, title }; }
// Our presentational component const ComponentWrapper = (props) => { const [state, setState] = useState({value: 1}) return <StyledComponent> <button data-type='plus' onClick={() => setState({value: addToItself(state.value)})} /> <button data-type='multiply' onClick={() => setState({value: multiplyByTwo(state.value)})} /> <button data-type='divied' onClick={() => setState({value: dividedByTwo(state.value)})} /> <div> {state.value} </div> </StyledComponent> }
function useLocalState(localItem) { const [loc, setState] = useState(localStorage.getItem(localItem)); const setLoc = (newItem) => { if(localItem !== newItem) { localStorage.setItem(localItem, newItem); //Use window to tunnel through actions window.dispatchEvent( new Event(localItem) ); setState(newItem); } } return [loc, setLoc]; }
const useFetch = url => { const [state, setState] = useState({data: null, loading: true }); useEffect(() => { setState(state => ({data: state.data, loading: true})); const fetchData = async () => { const res = await fetch(url); const txt = await res.text(); setState({data: txt, loading: false}); }; fetchData().catch(e => console.log(e)); }, [url]); return state; }
const useReducer = (reducer, initialState) => { const [state, setState] = useState(initialState); const dispatch = action => { const newState = reducer(state, action); setState(newState); } return [state, dispatch]; }
function useToggle(initialVal = false){ const [state, setState] = useState(initialVal); const toggle = () => { setState(!state) }; return [state, toggle]; }
export default function Toggle(props) { const [state, setState] = useState(false); return ( <button onClick={() => { setState(!state); }} data-testid="toggle" > {state === true ? "Turn off" : "Turn on"} </button> ); }
function useToggle(initialValue = false) { // call useState, "reserve piece of state" const [state, setState] = useState(initialValue); const toggle = () => { setState(!state); }; // return piece of state and a Function to toggle it return [state, toggle]; }
function useToggle(initialVal = false) { // call useState, "reserve piece of state" const [state, setState] = useState(initialVal); const toggle = () => { setState(!state); }; // return piece of state AND a function to toggle it return [state, toggle]; }
function useToggle(initialVal = false) { const [state, setState] = useState(initialVal); const toggle = () => { setState(!state); }; return [state, toggle]; }
const useMergeState = obj => { const [state, setState] = useState(obj) function mergeState(newState) { setState(prev => ({ ...prev, ...newState })) } return [state, mergeState] }
function useCount() { const [count, setState] = useState(0); function increment() { setState(count + 1); } return { count, increment, }; }