CODEWITHSUNDEEP
reactjsuse-state
テンカサン
テンカサン

Reputation: 31

How can I send a value with Select tag through the useState on ReactJS

I want my code to send the variable from onChange to useState here's my code at for displaying my table on each row

const dataTableElements = entireListData
.slice(0, maxRow)
.map((entireListData, index) => {
  var dotStatus = null;

  if (entireListData.PriceStatus == true) {
    dotStatus = <GreenDot>{entireListData.Price}</GreenDot>;
  } else {
    dotStatus = <RedDot>{entireListData.Price}</RedDot>;
  }
  return (
    <Tr data-index={index}>
      <Td>{entireListData.no}</Td>
      <Td>{entireListData.BillNo}</Td>
      <Td>{entireListData.Product}</Td>
      <Td>
        <StatusTableBox>{dotStatus}</StatusTableBox>
      </Td>
    </Tr>
  );
});

next is my select tag

return (
<div>
  <Tabbar />
  <div>
    <p>
      Show
      <select
        value={entireListData.no}
        onChange={() => {
          sendCurrentRow(entireListData.no);
        }}
      >
        {rowTableElement}
      </select>
      Entires
    </p>
  </div>

from the result of the above, it shows in console "undefined".

Upvotes: 1

Views: 630

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

Usually the select tag gives an event in the onChange method that you can use to extract the value which selected, take a look at this example:

      <select
        value={entireListData.no}
        onChange={(event) => {
          sendCurrentRow(event.target.value);
        }}
      >
         //here should be your options with different values
         <option value="1">
           1
         </option>
         <option value="2">
           2
         </option>
        // I don't know this value has the option or not => {rowTableElement}
      </select>

Upvotes: 2

Related Questions