skip to Main Content

I am using useState in react native.
I created a state called lstandtime and lacttime.

I also created functions called onSubmitfunc and LsonChangefunc and LaconChangefunc.

We need 3 components called MainCons, so we made 3 components. But it could be three or more.

As you can see, the format of each component, state, and function are all similar, but three are needed, so a number is attached to the end of the variable.

I want to reduce duplicate code, but how do I do it?

this is my code

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>
    </>
  );
}

3

Answers


  1. Maybe declare an object with all these properties and then use them as parameters at your update functions.

    See my example code below. This is just a snippet to give you the 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')}
          />
    

    If you need more than these and you want to go further, you could create a loop

    let obj = {}
    for (let i = 1; i < 10; i++) {
      obj['lstandtime' + i] = '';
      obj['lacttime' + i] = '';
    }
    

    and then parametrize your MainCons component with these values using Object.entries

    Edit
    Cannot test my code but I thought about AKX’s comment and i wrote this solution. It’s cleaner and I hope it helps you

    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>
            )
        })
        })
        </>
      );
    }
    
    Login or Signup to reply.
  2. 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 />)}</>
    }
    
    Login or Signup to reply.
  3. If you have multiple states of the same kind you could use an array as mentioned by @AKX in the comments:

    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>
          )}
        </>
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search