I'm trying to use a MUI slider to update a database, using Remix ActionFunction.
However, when the MUI slider moves, it is reloading the default function, not the ActionFunction. How do I get it to call the action?
The route looks like this:
export default function AdminOrganizationSettingsGeneral(setOrgTeam: any) {
const actionData = useActionData<typeof action>();
const setChanges = async (event: Event, value: number) => {
console.log("submitting!");
return submit(event.target.name, value);
};
return (
<PaperCustom sx={{ width: "100%" }}>
{teams.map((val, index) => (
<Grid container sx={{ padding: "1rem" }}>
<Grid item md={2} xs={3}>
<Typography>{val.status}</Typography>
</Grid>
<Grid item md={3} xs={6}>
<Typography>{val.name}</Typography>
</Grid>
<Grid item md={3} xs={3}>
<Typography>Team: {val.members}</Typography>
</Grid>{" "}
<Grid item md={4} xs={12}>
<DiscreteSlider
setChanges={setChanges}
teamValue={val.setup ? val.setup : 10}
name={val._id}
/>
</Grid>
</Grid>
))}
</PaperCustom>
);
}
This is the DiscreteSlider component:
export default function DiscreteSlider(props: any) {
const submit = useSubmit();
return (
<Form
method="post"
onChange={(event) => {
submit(event.currentTarget);
}}
>
<Box sx={{ width: "100%" }}>
<Slider
type="submit"
aria-label="Temperature"
defaultValue={props.teamValue}
step={10}
min={10}
max={30}
marks={marks}
onChange={(event: Event, value: number) => {
submit(event, value);
}}
{...props}
/>
</Box>
</Form>
);
}
When I make a change on the slider, it reloads the AdminOrganizationSettingsGeneral
function, so the DOM updates. But it does not call the ActionFunction
... (see below)
ActionFunction
export const action: ActionFunction = async (args: ActionArgs) => {
const { request, context, params } = args;
const { orgId = "", teamId = "" } = params;
const form = await request.formData();
console.log("This is not happening...");
};
You need to specify method: post
. The default for submit is get
. Remember, you're calling the submit
function from useSubmit
. You're not calling the form submit.
https://remix.run/docs/en/main/hooks/use-submit
onChange={(event: Event, value: number) => {
submit({ temperature: value }, { method: 'post' });
}}
Then in your action you can do:
const formData = await request.formData()
const temperature = Number(formData.get('temperature'))