I have a form with many select fields and input fields. I'm wondering if there exists way to programmingly generate state, setState and onChange function for select/input fields.

I can generate dynamically generating input field. But I need to apply it to select fields.

https://codesandbox.io/s/qv4qn7q0j9

In useInput.js, dynamically generated attributes are given to input component by spread operator.

I want to make useSelect.js, which dynamically generates attributes for given inputs.

For example,

const [name, setName] = useState('');
const nameOnChange = (newName) => {
  setName(newName)
};

...

<Select
  placeholder="name"
  options={nameOptions}
  onChange={nameonChange}
/>

into

const name = useSelect('');
<Select input={name} />

or

<Select input="name" />

I think I'm looking for function which returns like

import {Aoptions, Boptions} from "../options.js";

const lookingfor = (input) => {
  const [input, setInput] = useState('');
  const placeholder = input.toString;
  const options = `${input}options`;
  const onChange = (newInput) => {
    setInput(newInput);
  };
  return {placeholder, options, onChange}
};

I roughly think regular expression may help, but I'm newbie in web-dev, and have no experience on regex. So any helps are very appreciated! Thank you for your patient reading :-)

0 Answers