Estoy usando useState en reaccionar nativo. Creé un estado llamado lstandtime y lacttime.
También creé funciones llamadas onSubmitfunc y LsonChangefunc y LaconChangefunc.
Necesitamos 3 componentes llamados MainCons, así que hicimos 3 componentes. Pero pueden ser tres o más.
Como puede ver, el formato de cada componente, estado y función es similar, pero se necesitan tres, por lo que se adjunta un número al final de la variable.
Quiero reducir el código duplicado, pero ¿cómo lo hago?
este es mi codigo
function Component() { const [lstandtime1, setLstandtime1] = useState(""); const [lacttime1, setLacttime1] = useState(""); const [lstandtime2, setLstandtime2] = useState(""); const [lacttime2, setLacttime2] = useState(""); const [lstandtime3, setLstandtime3] = useState(""); const [lacttime3, setLacttime3] = useState(""); const onSubmitfunc1 = useCallback( (e) => { e.preventDefault(); }, [lstandtime1, lacttime1], ); const LsonChangefunc1 = useCallback((e) => { e.preventDefault(); setLstandtime1(e.target.value); }, []); const LaconChangefunc1 = useCallback((e) => { e.preventDefault(); setLacttime1(e.target.value); }, []); const onSubmitfunc2 = useCallback( (e) => { e.preventDefault(); }, [lstandtime2, lacttime2], ); const LsonChangefunc2 = useCallback((e) => { e.preventDefault(); setLstandtime2(e.target.value); }, []); const LaconChangefunc2 = useCallback((e) => { e.preventDefault(); setLacttime2(e.target.value); }, []); const onSubmitfunc3 = useCallback( (e) => { e.preventDefault(); }, [lstandtime3, lacttime3], ); const LsonChangefunc3 = useCallback((e) => { e.preventDefault(); setLstandtime3(e.target.value); }, []); const LaconChangefunc3 = useCallback((e) => { e.preventDefault(); setLacttime3(e.target.value); }, []); return ( <> <MainCons onClick={onSubmitfunc1}> <input value={lstandtime1} onChange={LsonChangefunc1} /> <input value={lacttime1} onChange={LaconChangefunc1} /> </MainCons> <MainCons onClick={onSubmitfunc2}> <input value={lstandtime2} onChange={LsonChangefunc2} /> <input value={lacttime2} onChange={LaconChangefunc2} /> </MainCons> <MainCons onClick={onSubmitfunc3}> <input value={lstandtime3} onChange={LsonChangefunc3} /> <input value={lacttime3} onChange={LaconChangefunc3} /> </MainCons> </> ); }Tal vez declare un objeto con todas estas propiedades y luego utilícelos como parámetros en sus funciones de actualización.
Vea mi código de ejemplo a continuación. Esto es solo un fragmento para darte una idea.
const [options, setOptions] = useState({ lstandtime1: '', lacttime1: '', lstandtime2: '', lacttime2: '', lstandtime3: '', lacttime3: '' }) const changeFunction = useCallback((e, property) => { e.preventDefault(); setOptions({...options, [property]: e.target.value}) }, []); <input value={options.lacttime1} onChange={e => changeFunction(e, 'lacttime1')} />Si necesita más que estos y quiere ir más allá, puede crear un ciclo
let obj = {} for (let i = 1; i < 10; i++) { obj['lstandtime' + i] = ''; obj['lacttime' + i] = ''; } y luego parametrice su componente MainCons con estos valores usando Object.entries
Editar No puedo probar mi código, pero pensé en el comentario de AKX y escribí esta solución. Es más limpio y espero que te ayude.
function Component() { const size = 5; const [lstandtime, setLstandtime] = useState([...new Array(size).fill('')]) const [lacttime, setLacttime] = useState([...new Array(size).fill('')]) const onSubmitfunction = useCallback(deps => e => { e.preventDefault(); }, deps, ); const LsonChangefunction = useCallback(index => e => { e.preventDefault(); setLstandtime([...lstandtime, [index]: e.target.value]); }, []); const LaconChangefunction = useCallback(index => e => { e.preventDefault(); setLacttime([...lacttime, [index]: e.target.value]); }, []); return ( <> ({lstandtime.map((val, index) => { return ( <MainCons onClick={e => onSubmitfunction([lstandtime[index], lacttime[index]])}> <input value={lstandtime[index]} onChange={LsonChangefunction(index)} /> <input value={lacttime[index]} onChange={LaconChangefunction(index)} /> </MainCons> ) }) }) </> ); }const SupComponet = () => { const [lstandtime1, setLstandtime1] = useState(''); const [lacttime1, setLacttime1] = useState(''); const onSubmitfunc1 = useCallback((e) => { e.preventDefault(); }, [lstandtime1, lacttime1]); const LsonChangefunc1 = useCallback((e) => { e.preventDefault(); setLstandtime1(e.target.value) }, []); const LaconChangefunc1 = useCallback((e) => { e.preventDefault(); setLacttime1(e.target.value) }, []); return <MainCons onClick={onSubmitfunc1}> <input value={lstandtime1} onChange={LsonChangefunc1} /> <input value={lacttime1} onChange={LaconChangefunc1} /> </MainCons> } const MainComponent = () => { return <>{new Array(3).fill(0).map((_) => <SupComponent />)}</> }Si tiene varios estados del mismo tipo, puede usar una matriz como la mencionada por @AKX en los comentarios:
function Component() { const [mainCons, setMainCons] = useState(new Array(3).fill({ lstandtime: "", lacttime: "", })); const onSubmitfunc = useCallback((idx) => (e) => { e.preventDefault(); }, [mainCons], ); const LsonChangefunc = useCallback((idx) => (e) => { e.preventDefault(); setMainCon((current) => ([ ...current.slice(0, idx), { ...current[idx], lstandtime: e.target.value, } ...current.slice(idx+1), ])); }, []); const LaconChangefunc = useCallback((idx) => (e) => { e.preventDefault(); setMainCon((current) => ([ ...current.slice(0, idx), { ...current[idx], lacttime: e.target.value, } ...current.slice(idx+1), ])); }, []); return ( <> {mainCons.map((mainCon, idx) => ( <MainCons onClick={onSubmitfunc(idx)}> <input value={mainCon[idx].lstandtime} onChange={LsonChangefunc(idx)} /> <input value={mainCon[idx].lacttime1} onChange={LaconChangefunc(idx)} /> </MainCons> )} </> ); }