Send Select without a form with GET method not working... React

[vitalijalbu]

Hi guys, basically I need a order-by select filter for my data, problem is that state form changes correctly but is sends null to backend:
Anyone can helpo please? Thanks in advance 🙏

JS:

const OrderBy = (props) => {
  const { filters } = props;

  const { data, setData, reset, get } = useForm({
    order_by: "",
  });

  console.log("...data", data);

  const handleChange = (e) => {
    e.preventDefault();
    setData("order_by", e.target.value);
    handleSubmit(e);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    try {
      // Make a request to the server using the inertia object
      get("search", data, {preserveState: true, replace:true });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        placeholder="Ordina per"
        defaultValue={data?.order_by}
        onChange={(e) => handleChange(e)}
      >
        <option value="default">Per te</option>
        <option value="date_asc">Data (dal più recente)</option>
        <option value="date_desc">Data (dal meno recente)</option>
        <option value="price_asc">Prezzo (dal più economico)</option>
        <option value="price_desc">Prezzo (dal più costoso)</option>
        <option value="surface_asc">Superficie (ordine crescente)</option>
        <option value="surface_desc">Superficie (ordine decrescente)</option>
      </Select>
    </form>
  );
};

export default OrderBy;

CONTROLLER:

        $orderBy = $request->query('order_by');
        $listings = $query->paginate(25)->withQueryString();

        return Inertia::render('search', [
            'data' => $listings,
            'filters' => [
                'order_by' => $request->query('order_by')
            ]]);

[alexthekiwi]

I think it's just an issue with how you're using the React state. When you call handleSubmit within the handle change function, it's still using the previous value of data, because React hasn't re-rendered the component.

To resolve, you'd either need to use a useEffect watching the value of data, or use router.get within the handleChange function.

[vitalijalbu]

I tried it but id does an infinite loop:

const OrderBy = (props) => {
  const { filters } = props;

  const { data, setData, get } = useForm({
    order_by: filters || ''
  });

  console.log('✅ data', data);

  useEffect(() => {
      try {
        // Make a request to the server using the inertia object
        get('search', {...data, preserveScroll: true});
      } catch (error) {
        console.error(error);
      }
  }, [data]);

  return (
    <Select
      placeholder="Ordina per"
      onChange={(e) => setData('order_by', e.target.value)}
    >
      <option value="default">Per te</option>
      <option value="date_asc">Data (dal più recente)</option>
      <option value="date_desc">Data (dal meno recente)</option>
      <option value="price_asc">Prezzo (dal più economico)</option>
      <option value="price_desc">Prezzo (dal più costoso)</option>
      <option value="surface_asc">Superficie (ordine crescente)</option>
      <option value="surface_desc">Superficie (ordine decrescente)</option>
    </Select>
  );
};

export default OrderBy;