How to take the value of select

Question

How do I get the value of select, gave a onChange, but the value is not being returned as expected.

<select
  className="form-control"
  value={area}
  onChange={e => setAddArea(e.target.value)}
>
  <option disabled selected>
    Selecione
  </option>
  {getArea.map((ar, i) => (
    <option key={i} value={ar.area}>
      {ar.area}
    </option>
  ))}
</select>;

async function handleCreate(e, area) {
  e.preventDefault();

  const response = await api.post("/pergunta", {
    area,
    pergunta
  });
  console.log(response.data);
}

const [area, setAddArea] = useState("");

Answer 1

I guess I was just about to solve, when you create a variable area and its method of modification setAddArea (React Hooks) you have already done where the value of the selection will be, and as changes the select at the event onChange makes the change (e.target.value) and after this change in the variable area has the value of select as needed. If in the code you need to use the selection value, just assign the variable value area.

An example running in Codesandbox

function App () {
  const [selectValue, setSelectValue] = React.useState(1);  
  const list = [
    {id: 1, name: 'select 1'},
    {id: 2, name: 'select 2'},
    {id: 3, name: 'select 3'},
    {id: 4, name: 'select 4'},
  ];
  return (    
    <div>
      <p>{selectValue}</p>
      <select value={selectValue} onChange={e => setSelectValue(e.target.value)}>
        {list.map((item, index) => (
          <option value={item.id}>{item.name}</option>
        ))}        
      </select>
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You have a method in your code async function handleCreate(e, area) that you have the area as a parameter, but it is unnecessary to only use, example:

async function handleCreate(e) {
  e.preventDefault()        
  const response = await api.post('/pergunta', {
      area,//<-- isso já é o suficiente
      pergunta
  }) 
}

Answer 2

The problem is not in collecting the value of select, but in the fact that you are creating a new scope for the variable area, as I point out @Virgilionovic. Here is an example of an applicable component that solves your problem:

import React, { useState } from 'react';

function Example() {
  const [selectValue, setSelectValue] = useState(1);  
  const list = [
    {id: 1, name: 'select 1'},
    {id: 2, name: 'select 2'},
    {id: 3, name: 'select 3'},
    {id: 4, name: 'select 4'},
  ];

  function handleCreate(e) {
    e.preventDefault()
    alert(selectValue)  
  }

  return (    
    <div>
      <p>{selectValue}</p>
      <select value={selectValue} onChange={e => setSelectValue(e.target.value)}>
        {list.map((item, index) => (
          <option value={item.id}>{item.name}</option>
        ))}        
      </select>
      <button onClick={handleCreate}>
        Click me
      </button>
    </div>
  )
}

export default Example;

Note that in the handleCreate the variable has been removed area of the parameters it receives, precisely to not create a local variable for the function and take advantage of the area that is associated with the state of the component.