How to create a lot of variables in react by writing little code

Question

I want to make a lot of variables like the below code. I think if I use the maps function it will work, but it does not work. Could you teach me how to reduce the code?

const name = useInput("");
  const area = useInput("");
  const job = useInput("");
  const company = useInput("");
  const school = useInput("");
  const tall = useInput("");
  const body = useInput("");
  const religion = useInput("");
  const smoking = useInput("");
  const blood = useInput("");
  const birthday = useInput("");
  const kakao = useInput("");
  const image1 = useInput("");
  const image2 = useInput("");
  const image3 = useInput("");
  const introduction = useInput("");

@YuryTarabanko it is react-apollo-hooks function https://github.com/trojanowski/react-apollo-hooks — 박형렬, Nov 05 '19 at 14:09
Possible duplicate of [Javascript How to define multiple variables on a single line?](https://stackoverflow.com/questions/4166785/javascript-how-to-define-multiple-variables-on-a-single-line) — Jay, Nov 05 '19 at 14:14

score 1 · Answer 1 · answered Nov 05 '19 at 14:02

1

Maybe you can convert it to array and object

const arr = ['name', 'area', etc...];
const obj = {};
arr.forEach(key => {
 obj[key] = useInput(key);
}

answered Nov 05 '19 at 14:02

Oleksandr Paiziak

382
2
5

Nice answer, but maybe you could tell the OP how to access obj to access the values entered. – SQL Hacks Nov 05 '19 at 14:10
in future you will be able to use destruction `const { name, area, } = obj;` – Oleksandr Paiziak Nov 05 '19 at 14:31
That probably won't work: https://reactjs.org/docs/hooks-rules.html – Felix Kling Nov 05 '19 at 14:34

score 0 · Answer 2 · answered Nov 05 '19 at 14:22

0

I hope this works for you

Array(16) please change number according to your variables

const [name,area,job,company,school,tall,body,religion,smoking,blood,birthday,kakao,image1,image2,image3,introduction] = Array(16).fill().map(() => useInput(""))

answered Nov 05 '19 at 14:22

Jay

2,826
2
13
28

That probably won't work: https://reactjs.org/docs/hooks-rules.html – Felix Kling Nov 05 '19 at 14:34

How to create a lot of variables in react by writing little code

2 Answers2