CODEWITHSUNDEEP
javascriptreactjsreact-redux
Steven Teglman
Steven Teglman

Reputation: 107

How to access input elements from a React function

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}

auto generated list (excuse the placeholder text)

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

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

enter image description here

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.

Upvotes: 0

Views: 91

Answers (3)

Aliasger Ujjainwala
Aliasger Ujjainwala

Reputation: 67

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

Upvotes: 1

tim
tim

Reputation: 727

You need to store the value

const [value, setValue] = React.useState();

Then give your input a onChange={e => setValue(e.target.value)}

I would change the id though

Upvotes: 1

Aliasger Ujjainwala
Aliasger Ujjainwala

Reputation: 67

You are getting the input fields value from "FormData" on onSubmit.

const saveActivities = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);

   // Insert code to run the call to the backend
}

Upvotes: 1

Related Questions