javascript - How to access input elements from a React function

Question

I currently have a form that is auto generated based on the amount of "Activities" a current user has. Each activity has a name and a value. My goal is to submit these values to the backend to update them. Yet I can't figure out how to reference these inputs. I was trying to read about using "ref"s, yet they come back with {current:null}

Here is the auto generated list (excuse the placeholder text)

When I inspect console here is what I find from the ref:

Here is my code:

import React, { useEffect } from "react";
import { useDispatch, useStore } from "react-redux";
import { connect } from "react-redux";
import * as actions from "../store/actions/patientSide";

export function ActivityTemplates() {
  const dispatch = useDispatch();
  const store = useStore();
  const ref = React.createRef();

  useEffect(() => {
    // Update the document title using the browser API
    dispatch(actions.getTodaysActivityTemplates());
  }, []);
  
  const activities = store.getState().patientSide.todays_activities;

  const listedStuff = activities.map((activity) => (
    <div>
      {activity.activity_name}
      <label for="value"> Value: </label>
      <input
        type="number"
        id="value"
        defaultValue={activity.value}
        min="0"
        max="10"
      ></input>
    </div>
  ));
  
  const saveActivities = () => {
    var inputs = ref;

    console.log(inputs);
    // Insert code to run the call to the backend
  };

  return (
    <div>
      <h1> Activity Templates</h1>
      <form id="form" onSubmit={saveActivities()} ref={ref}>
        {listedStuff}
        <input type="submit" name="save" />
      </form>
    </div>
  );
}

export default ActivityTemplates;

I am very new to React and JS and honestly have very little idea of what I'm doing, but if someone could point me in the right direction that would be awesome!

EDIT: After sleeping on it, I've realized I've just been trying to force react into my HTML. I believe I should instead use a React Form Hook, and do it properly from the ground up.

Answer 1

  <form onSubmit={handleOnSubmit}>
        <label>User Name</label>
        <input type="text"  name="username" /><br/>
        <label>Password</label>
        <input type="password"  name="password" /><br/>
        <input type="submit" value="Submit" />
      </form>



 const handleOnSubmit = (event) => {
    const formData = new FormData(event.target);
    const formDetails = {};

    event.preventDefault();
    for (let entry of formData.entries()) {
      formDetails[entry[0]] = entry[1];
    };
    console.log("formDetails", formDetails);
  }