Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

235
Views
React reuse functions used

So I implemented a react-select on my form in my react app for getting a value for a specific variable that i need, but the variable is not only one, I have many of it and i need to create a react select for each of them

here is a piece of my code for rendering the select

<p><span className='openbookclassname'>Material type: &nbsp; </span></p>    
<Creatable
        isClearable
        value={materialValue}
        options={materialOptions}
        onChange={materialhandleChange}
        onCreateOption={materialhandleCreate}
        classNamePrefix="materialtype"
        styles={customStyles}

/>

and these are its functions, its somehow long but is there anyway that i can reuse this function for each of my select variable without overlapping their functions(or data that is passed to them) because each variable will have different use value(state value) in their react-select.

const [materialValue, setmaterialValue] = useState();
  const [materialOptions, setmaterialOptions] = useState([
  { value: 'books', label: 'books' },
  { value: 'newspaper', label: 'Newspapers' },
  { value: 'theses and dissertation', label: 'TheseTheseTheses and Dissertation' },
  ]);

  const materialhandleChange = useCallback((inputValue) => setmaterialValue(inputValue), []);console.log(materialValue);

  const materialhandleCreate = useCallback(
    (inputValue) => {
      const newValue = { materialValue: inputValue.toLowerCase(), label: inputValue };
      setmaterialOptions([...materialOptions, newValue]);
      setmaterialValue(newValue);
    },
    [materialOptions]
  );

::sorry im not good at explaining but to make it short, i want to also get other variable data from user, the first one is the Material type which is the thing that i did here, but i want to also have other variables such as Publisher, availability ,(i will also use react select on them) but i dont like rewriting those functions over and over again and edit the functionality/var names on it so that they will not overlap with each other, so i'm looking for a way to shorten my code

about 4 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!