Can

Question

I would like to know if my option can have more than one value in react.

Can anyone help me how to add new value to my option? As you see "value2" is not right way to do that.

    const handleSelect = e => {
    const { target } = e;
    setAccount(target.value);
    setAccId(target.value2);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map(acc => (
            <option value={acc.accountNumber} value2={acc.id} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}

I found solution for JSON, and other to solve this, but I can't find out how to make more values for my code in react.

Does this answer your question? [Adding additional data to select options using jQuery](https://stackoverflow.com/questions/4564659/adding-additional-data-to-select-options-using-jquery) — wlh, Mar 25 '20 at 18:53

score 0 · Answer 1 · answered Mar 25 '20 at 18:51

0

That is not react related thing but rather html. option element can have only valid attributes (eg. value, disabled, label & selected - in react you use selected on select element if I remember correctly), val2 is not one of them.

answered Mar 25 '20 at 18:51

Danko

1,609
1
11
12

score 0 · Accepted Answer · answered Mar 25 '20 at 19:02

If you have access to userAccounts, set the option value to the index of the account in the array. then call setAccount and setAccId using the passed index. Otherwise, you can use a data attribute. See https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html

Using index to access array

const handleSelect = e => {
    const { target } = e;

    setAccount(userAccounts[target.value].accountNumber);
    setAccId(userAccounts[target.value].id);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map((acc, idx) => (
            <option value={idx} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}

Using dataset

const handleSelect = e => {
    const { target } = e;
    setAccount(target.value);
    setAccId(target.dataset.accountid);
  };
  console.log("account", account);
  return (
    <Card width bold>
      New Transaction
      <select
        value={account}
        onChange={e => handleSelect(e)}
        className="transaction__select"
      >
        <option>Choose acc</option>
        {usersAccounts &&
          usersAccounts.map(acc => (
            <option value={acc.accountNumber} data-accountid={acc.id} key={acc.id}>
              {acc.accountNumber}
            </option>
          ))}

Thank you, the first one is working! The index one is working fine, sadly i have bugs in other parts of my code :( :D. Im so happy that u helped me to solve at least this one! Thank you very much! — Dima Malko, Mar 25 '20 at 20:03

Can has more than one value? using React-hooks

2 Answers2

Can