I have a searchContainer component shown below, where every time I change an input value, it submits the form, which is what I want. However, I am now trying to have a button on the form which when clicked gets the value from one of the input boxes. I've encircled the button in red in the image below. When I click it, I want to get the current value from the 'sort by' input box to the left. To get this I set up a useState where const [sortValue, setSortValue] = useState("") and I put an onChange event on the sortBy input box which triggers a function to set the sortValue to its value. Then when I click the button I had an onClick button which gave an alert showing the value however it just shows the initial value in the useState now what it has been changed due to the onChange trigger.
The onChange does the following:
onChange={(e) => {
handleChange(e);
submit(e.currentTarget.form);
}}
The onClick from the button does the following:
onClick={() => {
alert(sortValue);
}}
See this in snippet below also
it looks like submitting the form re-renders the page and resets the value of sortValue to the initialValue.
Is there a way of setting this up so that when I click the button it always gives me the value in the input box but also submits the form?
import React, { useState } from "react";
import { FormRow, FormRowSelect, FormRowSelectDropdown } from ".";
import Wrapper from "../assets/wrappers/DashboardFormPage";
import { Form, useSubmit, Link } from "react-router-dom";
import { useAllProjectsContext } from "../pages/AllProjects";
import { FaRotate } from "react-icons/fa6";
let refreshSort;
const SearchContainer = () => {
const { data, searchValues } = useAllProjectsContext();
const [sortValue, setSortValue] = useState("");
const {
search,
projectNumber,
projectTitle,
projectStage,
projectPersonnel,
equipment,
contractType,
projectAdded,
location,
chemical,
siteType,
client,
sort,
} = searchValues;
const handleChange = (e) => {
setSortValue(e.target.value);
};
const submit = useSubmit();
const debounce = (onChange) => {
let timeout;
return (e) => {
const form = e.currentTarget.form;
clearTimeout(timeout);
timeout = setTimeout(() => {
onChange(form);
}, 2000);
};
};
return (
<Wrapper>
<Form className="form">
<h5 className="form-title">search form</h5>
<div className="form-center">
{/* search position */}
<FormRow
type="search"
name="search"
defaultValue={search}
onChange={debounce((form) => {
submit(form);
})}
/>
<FormRow
type="search"
name="projectNumber"
labelText="Project Number"
defaultValue={projectNumber}
onChange={debounce((form) => {
submit(form);
})}
/>
<FormRow
type="search"
name="projectTitle"
labelText="Project Title"
defaultValue={projectTitle}
onChange={debounce((form) => {
submit(form);
})}
/>
<FormRowSelect
labelText="Project stage"
name="projectStatus"
list={["Any", "site survey", "design", "workshop", "site"]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={projectStage}
/>
<FormRowSelect
labelText="Personnel"
name="projectPersonnel"
defaultValue={projectPersonnel}
list={[
"All Projects",
"Aaron Jones",
"Adrian Suchojad",
"Alan Stevenson",
"Alana Wilks",
"Andrew Dickson",
"Andrew Knight",
"Andrew McCrone",
"Andrew Williamson",
"Andy Louden",
"Austin Watson",
"Barry Dolan",
"Barry Middelton",
"Ben Faulkner",
"Ben Nicolson",
"Ben Wardrop",
"Ben Young",
"Brian Linnen",
"Callum George",
"Cameron Smyth",
"Charles Greig",
"Ciaran McClelland",
"Connor MacAulay",
"Connor Morton",
"Conor McDowall",
"Craig Garvie",
"Craig Thorburn ",
"Daniel Bisset",
"Daniel Carey",
"David Kydd",
"David Selkirk",
"Deivids Valds",
"Erin Donnelly",
"Euan McCall",
"Fidel Bernardez",
"Gary Callachan",
"Gary Lloyd",
"Gary McGeouch",
"Gavin Hughes",
"Gavin Mitchell",
"George McGee",
"Gordon Chalmers ",
"Graham Rees",
"Grant MacMillan",
"Isaac Stanton",
"Jack Brisbane",
"Jack McDonald",
"Jack Overfield",
"Jamie Aird",
"Jamie Grattan",
"Jamie Young",
"Jay Buglass",
"Jay Tullis",
"Joe Kelly",
"John Copeland",
"John Stevenson",
"Kai Stewart",
"Katie Peacock",
"Karen McGeouch",
"Kenny Mitchell",
"Kevin Brodie",
"Kevin Collier",
"Kevin Whitelaw",
"Kieran Park",
"Laura Hill",
"Leon Doig",
"Lewis Scott",
"Lewis Witherspoon",
"Liam Fleming",
"Liam Mann",
"Liam Taylor",
"Luke Mayhew",
"Luke Morley",
"Mark Bennie",
"Mark Tench",
"Michael Gollogly",
"Michael Law",
"Natasha Wood- Wakefield",
"Nelson Wamala",
"Nikki Christie",
"Paris Koullias",
"Raymond Murray",
"Robert Adamson",
"Robert Kettles",
"Ross Brydie",
"Ross Hopgood",
"Ross McLoughlin",
"Ryan Jeffrey",
"Ryan Latimer",
"Ryan Meek",
"Ryan Watson",
"Ryan Young",
"Sarah Lovell",
"Scott Morley",
"Simon Butchart",
"Stephen Mullen",
"Steve Creene",
"Steven Drummond",
"Stuart Black",
"Stuart Johnston",
"Stuart Nicholson",
"Stuart Parker",
"Vaclav Prokes",
"Wayne Henderson ",
"William Barlas",
"William Russell",
]}
onChange={(e) => {
console.log("blob");
submit(e.currentTarget.form);
}}
/>
<FormRowSelect
labelText="Equipment"
name="equipment"
list={[
"All",
"kiosk",
"dosing skid",
"POA catchpot",
"tanker fill point",
"MCC",
]}
onChange={(e) => {
console.log("blob");
submit(e.currentTarget.form);
}}
defaultValue={equipment}
/>
<FormRowSelect
labelText="Contract Type"
name="contractType"
list={["All", "psc", "PO", "d&b", "construction"]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={contractType}
/>
<FormRowSelect
labelText="Project Added"
name="projectAdded"
list={["All Years", "2020", "2021", "2022", "2023"]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={projectAdded}
/>
<FormRowSelect
labelText="Location"
name="location"
list={["All", "Edinburgh", "Glasgow", "Aberdeen", "Fife"]}
onChange={(e) => {
refreshSort = e.target.value;
submit(e.currentTarget.form);
}}
defaultValue={location}
/>
<FormRowSelect
labelText="Chemical"
name="chemical"
list={[
"All",
"sodium hypochlorite",
"Sodium Hydroxide",
"PACl",
"Ammonium Sulphate",
]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={chemical}
/>
<FormRowSelect
labelText="Site Type"
name="siteType"
list={["All", "WTW", "WwTW", "SR"]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={siteType}
/>
<FormRowSelect
labelText="Client"
name="client"
list={["All", "Scottish Water", "Diageo", "RSE (Capital Projects)"]}
onChange={(e) => {
submit(e.currentTarget.form);
}}
defaultValue={client}
/>
<FormRowSelect
name="sort"
labelText="sort by"
id="sortValue"
list={[
"Project Added",
"Project Number",
"Project Description",
"Chemical",
"Site Type",
"Contract Type",
"Client",
"PM",
"SPM",
"Design Lead",
"Project Stage",
"Contract Value",
"Location",
"Last Updated",
]}
onChange={(e) => {
handleChange(e);
submit(e.currentTarget.form);
}}
defaultValue={sort}
/>
<button
className="btn form-btn"
style={{ width: 60 }}
onClick={() => {
alert(sortValue);
}}
>
<FaRotate />
</button>
<Link
to="/dashboard/all-projects"
className="btn form-btn delete-btn"
>
Reset Search Values
</Link>
</div>
</Form>
</Wrapper>
);
};
export default SearchContainer;