React Hooks Modal 通过 state？

Question

So im working on a React app, and im a bit rusty as I took some time learning other things. It will eventually be connecting to an API but for now im just working on the front-end.

Anyways I have a modal that uses react-bootstrap. Here is the modal (it's a simple "update" form for right now).

import React from "react";
import { useState } from "react";
import axios from "axios";
import Modal from "react-bootstrap/Modal";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const SensorModalForm = props => {
  const [name, setName] = useState(props.name);
  const [device, setDevice] = useState(props.device);

  return (
    <Modal show={props.show} onHide={props.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Edit Form</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form onSubmit={props.handleSubmit}>
          <Form.Group controlId="formBasicName">
            <Form.Label>Device Name</Form.Label>
            <Form.Control
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
            />
            <Form.Text className="text-muted">
              We'll never share your email with anyone else.
            </Form.Text>
          </Form.Group>
          <Form.Group controlId="formBasicDevice">
            <Form.Label>Device Type</Form.Label>
            <Form.Control
              type="text"
              value={device}
              onChange={e => setDevice(e.target.value)}
            />
          </Form.Group>
          <Button variant="primary" onClick={props.handleSave}>
            Save Changes
          </Button>
          <Button variant="secondary" onClick={props.handleClose}>
            Close
          </Button>
        </Form>
      </Modal.Body>
      <Modal.Footer>text</Modal.Footer>
    </Modal>
  );
};

export default SensorModalForm;

It's pretty basic, and it's also my first time using react hooks (I literally just sorta adapted an example to this).

The "card" component that calls this is here (Which is part of a table component which is what has the state with all the sensors currently). Here is the card component:

/* eslint-disable */
import React, { useState } from "react";
import SensorModalForm from './SensorModalForm'
import { Link } from "react-router-dom";
import Button from "react-bootstrap/Button";


const SensorCard = ({ props, sensor, toggleSensor }) => {
  const [show, setShow] = useState(false);

  const handleSave = () => {
    setShow(false)
    console.log("Submitted")
  }
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  if (sensor) {
    const { id, name, device, temp, humidity, active } = sensor;
    return (
      <tr>
        <td>{id}</td>
        <td>{name}</td>
        <td>{device}</td>
        <td>{temp}</td>
        <td>{humidity}</td>
        <td>{active ? "True" : "False"}</td>
        <td>
          <Link
            to={{
              pathname: `/devices/${id}`,
              state: { sensor: sensor }
            }}
            className="btn btn-info btn-sm"
          >
            View
          </Link>
          <SensorModalForm device={device} name={name} handleClose={handleClose} handleSave={handleSave} show={show}/>
          <Button variant="info" size="sm" onClick={handleShow}>
            Edit
          </Button>
          <Button variant="info" size="sm" data-id={id} onClick={toggleSensor}>
            Toggle Active
          </Button>
        </td>
      </tr>
    );
  }
};

export default SensorCard;

The problem Im running into is I want to do an axios PUT/PATCH call with the new updated values once I Submit/Save the modal (react-bootstrap is where I got the setShow hooks etc... from). However I am not exactly sure how I can pass those values down?

I feel like this is one of those instances where i've "nested" too far down and using redux would be better...but it's a simple app and really I don't want to force redux if I can solve this small problem. I am pretty rusty at this so I think there is something obvious I am missing, but essentially I want to call an axios PUT request on the handleSave callback within SensorCard .

Is this possible? I feel like I could just call e.target.name.value or is that bad practice?

Answer 1

Within you Modal code, you must pass the values that you want to save by calling your save method like this:

<Button variant="primary" onClick={() => props.handleSave(name, device)}>

And in your SensorCard, your function signature should expect those parameters

const handleSave = (name, device) => {
  // Your implementation
}