Реагировать на состояние обновления, показывая другой компонент

Question

У меня есть состояние реакции. После отправки формы я хочу отправить введенные значения в другой компонент, а затем показать в браузере. Я успешно отправляю форму, но когда отправляю порпс в другой компонент. Ничего не отображается.

Вот мой компонент героя

import React from "react";
import "./App.css";
import Show from "./Show";

function App() {
  const [state, setState] = React.useState({
    input: " ",
    text: " "
  });

  const changeHandler = e => {
    setState({ ...state, [e.target.id]: e.target.value });
  };
  const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
    return <Show show={state} />; //this is the component where I am sending props
  };

  return (
    <React.Fragment>
      <div className="row">
        <form className="col s12" onSubmit={handleSubmit}>
          <div className="row">
            <div className="input-field col s3">
              <input
                id="input"
                type="text"
                data-length="4"
                onChange={changeHandler}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
          <div className="row">
            <div className="input-field col s8">
              <textarea
                id="text"
                className="materialize-textarea"
                data-length="120"
                onChange={changeHandler}
              ></textarea>
              <label htmlFor="textarea2">Right your text</label>
            </div>
          </div>
          <button
            className="btn waves-effect blue lighten-1"
            type="submit"
            name="action"
          >
            Submit
          </button>
        </form>
        <Show /> //After submit the form I want to show to the browser
      </div>
    </React.Fragment>
  );
}

export default App;

Вот мой дочерний компонент.

import React from "react";

export default function Show({ show }) {
  return (
    <div>
      {show ? (
        <ul>
          <li>{show.input}</li>
          <li>{show.text}</li>
        </ul>
      ) : null}
    </div>
  );
}

ps: игнорировать это сообщение. Для того, чтобы загрузить этот пост, мне нужно. напиши больше ?.

Answer 1

Метод вызова был неправильным

1. handleSubmit - это вызов активности события .its not component
2. Внутри handleSubmit возврат компонента неверен

Так что лучше передать значение состояния на Show компонент внутри родительского фрагмента

const handleSubmit = e => {
    e.preventDefault();
    console.log(state);
  };


return (
    <React.Fragment>
      <div className="row">
        <form className="col s12" onSubmit={handleSubmit}>
          <div className="row">
            <div className="input-field col s3">
              <input
                id="input"
                type="text"
                data-length="4"
                onChange={changeHandler}
              />
              <label htmlFor="input_text">Input text</label>
            </div>
          </div>
          <div className="row">
            <div className="input-field col s8">
              <textarea
                id="text"
                className="materialize-textarea"
                data-length="120"
                onChange={changeHandler}
              ></textarea>
              <label htmlFor="textarea2">Right your text</label>
            </div>
          </div>
          <button
            className="btn waves-effect blue lighten-1"
            type="submit"
            name="action"
          >
            Submit
          </button>
        </form>
        <Show show={state} /> //pass state directly
      </div>
    </React.Fragment>
  );