I implemented a Modal which uses a custom Hook in my App that should function as a login mask for a WiFi network. So far the Modal is working and I also already managed to pass the name of the selected SSID to it. However I'm struggling with getting back a variable into my other component from where I launched the modal.

Modal.js:

import React from 'react';
import { createPortal } from 'react-dom';



const Modal = ({ isShowing, connect, ssid, hide }) => isShowing ? createPortal(

    <React.Fragment>
        <div className="modal-overlay" />
        <div className="modal-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
            <div className="modal">
                <div className="modal-header">
                    <button type="button" className="modal-close-button" data-dismiss="modal" aria-label="Close" onClick={hide}>
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div className="modal-body">
                    <p>Connect to: {ssid}</p>
                    <label>
                        <form onSubmit={connect}>
                            <input
                                id="password"
                                name="Password"
                                type="password"
                                value={"password"}
                            />
                            <button type="submit">Connect</button>
                        </form>
                    </label>
                </div>

            </div>
        </div>
    </React.Fragment>, document.getElementById("modal")
) : null;

export default Modal;

useModal.js:

import { useState } from 'react';

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);
  const [password, setPassword] = useState("password");

  function toggle() {
    setPassword("HOW");
    setIsShowing(!isShowing);
  }

  return {
    password,
    isShowing,
  }
};

export default useModal;

Settings.js:

import React from "react";
import { useState, useEffect } from "react";
import Modal from "../../components/Modal";
import useModal from "../../components/useModal";

const electron = window.require('electron');
const { ipcRenderer } = electron;


const Settings = ({ reqReload }) => {

  const [wifiList, setWifiList] = useState([{ id: "", ssid: 'No Networks available' }]);
  const [ssidSelected, setSsidSelected] = useState("127.0.0.1");
  const { isShowing, toggle } = useModal();


  const updateWifi = (event, args) => {
    setWifiList(args);
  };

  function openDialogue(ssid) {
    setSsidSelected(ssid);
    toggle();
  };
  /*
  function connectWifi(password) {
    console.log("Aktuelles Passwort: ", password);
    toggle();
  }
  */

  useEffect(() => {
    ipcRenderer.send('updateWifi');
    ipcRenderer.on('wifi_list', updateWifi);

    return function cleanup() {
      ipcRenderer.removeListener('wifi_list', updateWifi);
    };
  }, []);

  return (
    <div className="settings">
      <Modal
        isShowing={isShowing}
        connect={connectWifi}
        ssid={ssidSelected}
        hide={toggle}
      />
      <div className="settings__header">
        <h2></h2>
      </div>
      <div className="settings__body">
        <div className="settings__connections">
          <div className="settings__connections__wifi">
            <p><i>Available Wifi-Networks:</i></p>
            <div className="settings__connections__wifi__list">
              {wifiList.map((item, i) => (
                <div className="settings__connections__wifi__list__item" key={i}>
                  <button className="selectNetworkButton" type="button" onClick={() => openDialogue(item.ssid)}>{item.ssid}</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

export default Settings;

The code above already contains some things I tried. As stated before, passing the SSID to the modal worked, but I dont have a clue how to get the password back to Settings.js to handle the data there.

I'd be happy if someone can point me in the right direction!

CodePudding user response：

in order to get back a variable from a child component, you can have the variable you would like to get back as a state in your parent component:

const [yourVariable, setYourVariable] = useState('')

then pass setYourVariable as a props to your modal. this way you can set youVariable from inside the modal component, and get back its value this way :

// inside modal component 
 setYoutVariable(...)

CodePudding user response：

I stumbled over another article just now and it seems like using a stateless component as my model leads to a dead end. Will have to convert it to a stateful component in order to extract the data from the form.