Доступ к реквизиту в дочернем компоненте без сохранения состояния (React js + Spring Security)

Question

Итак, я делаю приложение Spring Boot с React front. На главной странице есть форма входа в систему, представленная как постоянная. В этой константе у меня есть handleSubmit, который отправляет запрос на сервер и успешно получает данные ответа, как html (я могу только console.log это).

Мой вопрос: как мне передать этот ответ из моей формы (const) на главную страницу, для рендеринга?

Вот форма входа:

import React, { Component } from "react";
import { Formiz, useForm } from "@formiz/core";
import { isEmail } from "@formiz/validations"; // Import some validations
import { MyField } from "./myField";
import axios from "axios";
import { Link, Redirect } from "react-router-dom";

export const MyForm2 = () => {
  const myForm = useForm();
  let resp = "null";

  const handleSubmit = (values, event) => {
    console.log(values.email + ", " + values.password);

    axios({
      method: "post",
      url: "/",
      data: {
        j_username: values.email,
        j_password: values.password
      }
    })
      .then(function(response) {
        if (response.status === 200) {
          console.log("login success");
          resp = response.data;
          console.log(resp);
        } else {
          console.log("login response: " + JSON.stringify(response));
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  //console.log("resp: "+JSON.stringify(resp));   //--ALWAYS "null"

  return (
    <Formiz connect={myForm} onValidSubmit={handleSubmit}>
      <form noValidate onSubmit={myForm.submit}>
        <MyField
          name="email"
          label="E-mail: "
          validations={[
            {
              rule: isEmail(),
              message: "This is not a valid email"
            }
          ]}
        />
        <MyField name="password" label="Password: " type="password" />
        <button type="submit" disabled={!myForm.isValid}>
          Submit
        </button>
      </form>
    </Formiz>
  );
};

Answer 1

Это основной код компонента (я знаю, что он грязный, просто пытаюсь сначала заставить его работать ..):

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {
    BrowserRouter as Router,
    Link,
    Redirect
} from 'react-router-dom';
import {MyForm} from "./myForm";
import {MyForm2} from "./myForm2";
import NameForm from "./nameForm";
import {MyField} from "./myField";
import {isEmail} from "@formiz/validations";
import {Formiz, useForm} from "@formiz/core";
import axios from "axios";

class Home extends Component {

    state =  {
        selectedFile: null,
        imagePreviewUrl: null,
        prediction: null,
        redirect: false,
        login2: false,
        login3: false
    };

    login2 = () => {
        if (!this.state.login2) this.setState({login2: true})
        else this.setState({login2: false})
    }

    login3 = () => {
        if (!this.state.login3) this.setState({login3: true})
        else this.setState({login3: false})
    }

    fileChangedHandler = event => {
        this.setState({
            selectedFile: event.target.files[0]
        })

        let reader = new FileReader();

        reader.onloadend = () => {
            this.setState({
                imagePreviewUrl: reader.result
            });
        }

        reader.readAsDataURL(event.target.files[0])

    }

    submit = () => {

        console.log("post sent from frontend8081");

        var fd = new FormData();

        fd.append('file', this.state.selectedFile);

        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (this.status === 200) {
                console.log("at home: "+this.status+" "+this.statusText);
            }
        };
        var $this = this;
        request.onload = function() {
            console.log(`Response: ${request.response}`);
            $this.setState({
                prediction: request.response,
                redirect: true
            });
        };
        request.onerror = function() { // only triggers if the request couldn't be made at all
            console.log(`Network Error`);
        };
        request.onprogress = function(event) { // triggers periodically
                                           // event.loaded - how many bytes downloaded
                                           // event.lengthComputable = true if the server sent Content-Length header
                                           // event.total - total number of bytes (if lengthComputable)
            console.log(`Received ${event.loaded} of ${event.total}`);
        };
        //request.open("POST", "https://us-central1-tutorial-e6ea7.cloudfunctions.net/fileUpload", true);
        request.open("POST", "http://localhost:8082/image", true);
        request.send(fd);
    }

    componentDidMount() {
        setInterval(this.hello, 250);
    }

    hello = () => {
        fetch('/api/hello')
            .then(response => response.text())
            .then(message => {
                this.setState({message: message});
            });
    };

    render() {
        let $imagePreview = (<div className="previewText image-container">Please select an Image for Preview</div>);
        if (this.state.imagePreviewUrl) {
            $imagePreview = (<div className="image-container" ><img src={this.state.imagePreviewUrl} alt="icon" width="200" /> </div>);
        }
        let $form2;
        if ( this.state.login2 ) {
            console.log("login2 rendered");
            $form2 = (
                <div>
                    <MyForm />
                </div>
            )
        } else $form2 = (<div />)
        let $form3;

        if ( this.state.login3 ) {
            $form3 = (<MyForm2/>)
            //$form3 = < NameForm />
        } else $form3 = (<div />)
        if (!this.state.redirect) return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">{this.state.message}</h1>
                    <Link to="/login1">
                        <button variant="outlined">
                            Log-in to your account1
                        </button>
                    </Link>
                        <button variant="outlined" onClick={this.login2}>
                            Register
                        </button>
                    { $form2 }
                    <button variant="outlined" onClick={this.login3}>
                        Log-in
                    </button>
                    { $form3 }
                    <Router>
                        <a href={'http://localhost:8082/hello'}>
                            <button variant="outlined">
                                Google App
                            </button>
                        </a>
                    </Router>
                    <input type="file" name="avatar" onChange={this.fileChangedHandler} />
                    <button type="button" onClick={this.submit} > Upload </button>
                    { $imagePreview }
                </header>
            </div>
        );
        else if ($form3.state) {
            return (
                <Redirect to={{
                    pathname: '/results',
                    state: { prediction: this.state.prediction,
                            img: this.state.imagePreviewUrl}
                }}/>
            )
        }
    }
}

export default Home;