React undefined props issues - reactjs

Question

Hello I have a question about my code.
In the SearchBar.js, I got error, which is undefined props.
I have two question, if it is undefined why the if statement does not invoke and
I don't understand why props is undefined because I think I pass props properly from parent component to child component( SearchBar.js)
enter code here
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/SearchBar';
import ShopList from './components/ShopList';
class App extends React.Component {
state ={ title: [], text: ''}
componentDidMount(){
this.setState({title:["javascript","react","redux","c++","java"]})
}
handleSubmit = (e) =>{
e.preventDefault();
}
handleChange = (e) => {
this.setState({text: e.target.value})
}
render() {
return (
<div>
<div className="split left">
<div className="centered">
<SearchBar handleSubmit={this.handleSubmit} handleChange={this.handleChange} userinput={this.state.text}/>
<ShopList shops={this.state.title}/>
</div>
</div>
<div className="split right">
<div className="centered">
</div>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
SearchBar.js
import React from 'react';
class SearchBar extends React.Component{
constructor(props){
super(props);
}
render(){
if(!this.props){
return <div>Loding..</div>
}
return (
<form className="ui form" onSubmit={this.props.handleSubmit}>
<div className="inline field">
<input onChange={this.props.handleChange} className="myinput" type="text" style={{width: '85%'}} value={props.userinput}/>
<button className="ui primary button" type="submit">button</button>
</div>
</form>
)
}
}
export default SearchBar;