Javascript React 组件 传递值

我需要一些帮助:

1. 如何使用LoginPanel组件中的值name，用户将其写入输入并单击按钮，然后在App组件中使用它.
2. 如何将LoginPanel呈现为第一个，如果写入了输入名称并单击了按钮，则将视图切换到App组件？

我不明白这一点.

我的代码看起来是这样的.

import React, { useState } from "react";

function LoginPanel() {
  const [fname, setName] = useState({
    fName: "",
    password: "",
  });

  function handleChange(event) {
    const { name, value } = event.target;

    setName(prevValue => {
      return {
        ...prevValue,
        [name]: value
      };
    });
  }

  return (
    <div className="container">
      <h1>
        Log In ↓
      </h1>
      <form>
        <input
          onChange={handleChange}
          name="fName"
          value={fname.fName}
          placeholder="First Name"
        />
        <input
          type='password'
          name="password"
          placeholder="Password"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default LoginPanel;

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState([]);

  function addNote(newNote) {
    setNotes((prevNotes) => {
      return [...prevNotes, newNote];
    });
  }

  function deleteNote(id) {
    setNotes((prevNotes) => {
      return prevNotes.filter((noteItem, index) => {
        return index !== id;
      });
    });
  }

  return (
    <div>
      <Header />
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem, index) => {
        return (
          <Note
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
        );
      })}
      <Footer />
    </div>
  );
}

export default App;

import React, { useState } from "react";
import App from "./App";
import LoginPanel from "./LoginPanel";

function Main() {
  const [isLogged, setLogged] = useState(false);

  return (
    <div>
      {!isLogged ? <LoginPanel /> : <App />}
    </div>
  )
}

export default Main

我try 了很多Reaction教程和文档. 我希望在用户将其写入输入并单击按钮并在App组件中使用它之后，使用LoginPanel组件中的值name，并将LoginPanel呈现为第一个，如果输入名称已写入并单击按钮，则将视图切换到App组件？