Send the selected option to the backend

Question

I have a select menu (with three options) along with a search bar. All I want is to save the selected option and the searched term and send them to the back-end. Here is my code:

import React, { useState, useEffect } from 'react'

const Table = () => {

    const navigate = useNavigate()

    const [users, setUsers] = useState([]);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [search, setSearch] = useState('');
    const [column, setColumn] = useState(''); //for saving the selected option

    useEffect(async () => {
        try {
            const response = await getUsers(search);
            setUsers(response.data.users);

        } catch (error) { }
    }, [search]);

   return (
       <input type='text' placeholder='search..' onChange={(e) => setSearch(e.target.value)} value={search} />
       <select aria-label=".form-select-sm example">
          <option selected value="1">all</option>
          <option value="2">name</option>
          <option value="3">phone</option>
       </select>
       <table className='w-full border-separate rounded-md'>
                <thead>
                    <tr className='bg-text-secondary text-white shadow-sm text-center'>
                        <th className='p-2'>name</th>
                        <th className='p-2'>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {currentUsers.map((item, index) =>
                        <tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
                            <td className='text-text text-sm p-2'>{item.name}</td>
                            <td className='text-text text-sm p-2'>{item.phone}</td>
                        </tr>
                    )}
                </tbody>
            </table>
   )
}

I have been successful in receiving the search term in the back-end, but I don't know how to apply this on the selected option as well. I tried adding onClick() and onChange() on each option and save the state, but I wasn't successful. How can I do this?

Answer 1

Your onChange should be on the select tag. Here is what I did.

import React, { useState, useEffect } from "react";

const Table = () => {

  const navigate = useNavigate()

  const [users, setUsers] = useState([]);
  const [currentUsers, setCurrentUsers] = useState([]);
  const [search, setSearch] = useState("");
  const [column, setColumn] = useState(""); //for saving the selected option

  useEffect(async () => {
    try {
        const response = await getUsers(search);
        setUsers(response.data.users);

    } catch (error) { }
}, [search]);

  return (
    <>
      <input
        type="text"
        placeholder="search.."
        onChange={(e) => setSearch(e.target.value)}
        value={search}
      />
// added here
      <select
        aria-label=".form-select-sm example"
        onChange={(e) => {
          setColumn(e.target.value);
          console.log(e.target.value);
        }}
      >
        <option selected value="1">
          all
        </option>
        <option value="2">name</option>
        <option value="3">phone</option>
      </select>
      <table className="w-full border-separate rounded-md">
        <thead>
          <tr className="bg-text-secondary text-white shadow-sm text-center">
            <th className="p-2">name</th>
            <th className="p-2">phone</th>
          </tr>
        </thead>
        <tbody>
          {currentUsers.map((item, index) => (
            <tr
              key={item.id}
              className={
                index % 2 === 0
                  ? "bg-white shadow-sm text-center"
                  : "bg-text bg-opacity-5 shadow-sm text-center"
              }
            >
              <td className="text-text text-sm p-2">{item.name}</td>
              <td className="text-text text-sm p-2">{item.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};