I'm creating a form and I want the current value of the range slider to show up above the slider but it won't render no matter what datatype I use for the attribute or where I write it.
import React, { useState } from "react";
export default function Slider() {
const [form, setForm] = useState({
selN: "",
selS: "",
position: 50,
});
const update = (e) => {
console.log(e.target.value);
const { value, name, type, checked } = e.target;
setForm((state) => ({
...state,
[name]: type === "checkbox" ? checked : value,
}));
};
return (
<>
<h2>{form.position.value}</h2> {/*Doesn't Display*/}
<label for="position">Hello {form.position.value}</label>{" "}
{/*Only "Hello" displays*/}
<p>{form.position.value}</p> {/*Doesn't Display*/}
<input
type="range"
id="position"
name="position"
min={1}
max={100}
defaultValue={form.position.value}
onChange={update}
/>
</>
);
}