Send lower level component prop up to App - reactjs

Question

I am trying to send a prop up to the top level.
At the top level I'm trying to console.log the event text
At the moment I do not want to use Redux techniques
Here is the lower level component
import React, { Component } from "react";
export default class Search extends Component {
state = {
text: ""
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
this.props.searchUsers(this.state.text);
};
render() {
return (
<div className="ui center aligned fluid container">
<div className="ui inverted segment">
<div className="ui inverted input">
<input
type="text"
name="text"
placeholder="Type Something"
value={this.state.text}
onChange={this.onChange}
/>
</div>
</div>
</div>
);
}
}
Then I try to console.log the text through an arrow function searchUsers
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Search from "./components/Search";
const App = () => {
searchUsers = text => {
console.log(text);
};
return (
<div className="App">
<Search searchUsers={this.searchUsers} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
export default App;
The Error I get
Please help me identify the problem.

Answer 1

In App component, you shouldn't use this and should use const
I think this should work
const App = () => {
const searchUsers = text => {
console.log(text);
};
return (
<div className="App">
<Search searchUsers={searchUsers} />
</div>
);
};
you can't use this inside stateless react component

Answer 2

Try this for index.js:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Search from "./components/Search";
const App = () => {
const searchUsers = text => {
console.log(text);
};
return (
<div className="App">
<Search searchUsers={searchUsers} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
export default App;
Edit:
when I console.log I only see the letter after I type the next one...So if I physically type Hello...I console.log Hell.......any way to fix that ?
This is because you are passing the state as argument after setting the state. But setState is asynchronous so by that time the state is not set. You can either pass e.target.value or using callback in setState to invoke this.props.searchUsers
For eg:
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
this.props.searchUsers(e.target.value);
};
This should fix your issue.
Hope it helps!