#useState object attribute doesn't render

2 messages · Page 1 of 1 (latest)

urban moon
#

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}
      />
    </>
  );
}

copper ginkgo
#

@urban moon the value is stored in position, so you should expect value at form.position to reflect the slider value.