React update state showing other component - reactjs

Question

I have react form state. After submitting the form I want to send the input values to other component and then showing to browser. I successfully submit the form but when I sent the porps to other component. It does not show anything.
Here is my hero component
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;
Here is my child component.
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: Ignore this message.In order to upload this post I need to. write more 😀.

Answer 1

Calling Method was wrong
handleSubmit is the event activity call .its not component
Inside the handleSubmit component return is not right one
So better pass state value on Show component inside the parent fragment
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>
);