where is the "this.props" defined? - reactjs

Question

Any help or hint would be greatly appreciated.
In SearchBar.js, where is the "this.props" defined?
I don't see this variable being defined in the SearchBar.js class?
Is it because of React.Component class?
How can I go into this React.Component class when debugging in google chrome?
SearchBar.js:
import React from 'react';
class SearchBar extends React.Component {
state = { term: '' };
onFormSubmit = event => {
event.preventDefault();
this.props.onSubmit(this.state.term);
console.log(this.state.term);
}
render() {
return (
<div className="ui segment">
<form onSubmit={this.onFormSubmit} className="ui form">
<div className="field">
<label>Image Search</label>
<input type="text" value={this.state.term} onChange={(e) => this.setState({ term: e.target.value.toUpperCase()})} />
</div>
</form>
</div>);
}
}
App.js:
import React from 'react';
import SearchBar from './SearchBar';
class App extends React.Component {
onSearchSubmit(term) {
console.log(term);
}
render() {
return (
<div className="ui container" style={{ marginTop: '10px'}}>
<SearchBar onSubmit={this.onSearchSubmit} />
</div>
);
}
}
export default App;
export default SearchBar;

Answer 1

The superclass, React.Component, creates a props object on the instance and assigns to it any props passed to the instance. If you go to react.development.js (or to ReactBaseClasses.js), you'll see:
function Component(props, context, updater) {
this.props = props;
where the first argument, the props, will contain props the component was called with.
Here, since the component is invoked like this:
<SearchBar onSubmit={this.onSearchSubmit} />
It has one prop, onSubmit, so the props are:
{
onSubmit: this.onSearchSubmit
}