Avoid navigation in react.js on button click - reactjs

Question

I am very new to react.js and trying to create a react component to render a json response from a REST API created in Python-Flask on button click.
Everything works fine but I am being navigated to the same page again and output which is a table does not persist.
We can see the console shows navigation back to the same page, which resets the component's state.
Snapshot of the console output shows the behavior
My component code:
var cols = [
{ key: 'id', label: 'Id' },
{ key: 'owner', label: 'Owner' },
{ key: 'path', label: 'Path' },
{ key: 'description', label: 'Description' }
];
class SearchForm extends React.Component {
constructor(props) {
super(props);
this.state = {items: [], searchString: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({searchString: event.target.value});
console.log(this.state.items);
}
handleSubmit(event) {
// alert('A name was submitted: ' + this.state.searchString);
// event.preventDefault();
// this.getMoviesFromApiAsync();
console.log(this.state.searchString);
this.getData();
}
getData() {
// Todo: Append the searchstring to the URI
fetch("http://localhost:5000/search")
.then(response => response.json())
.then(json => {
console.log("Inside request: ");
console.log(json.Data);
this.setState({
items: json.Data
});
console.log("after copy to state");
console.log(this.state.items);
});
}
generateRows() {
var cols = this.props.cols, // [{key, label}]
data = this.state.items;
console.log("Inside functions");
console.log(data);
// console.log(data);
return data.map(function(item) {
// handle the column data within each row
var cells = cols.map(function(colData) {
// colData.key might be "firstName"
return <td key={colData.key}> {item[colData.key]} </td>;
});
return <tr key={item.id}> {cells} </tr>;
});
}
generateHeaders() {
var cols = this.props.cols; // [{key, label}]
// generate our header (th) cell components
return cols.map(function(colData) {
return <th key={colData.key}> {colData.label} </th>;
});
}
render() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" value={this.state.searchString} onChange={this.handleChange.bind(this)} />
<input type="submit" value="Search" />
</form>
<br />
<div class="table-responsive">
<table class="table">
<thead> {headerComponents} </thead>
<tbody> {rowComponents} </tbody>
</table>
</div>
</div>
);
}
}
module.exports = SearchForm;
const main = document.getElementById('main');
ReactDOM.render(<SearchForm cols={cols}/>, main);

Answer 1

Formatting this as an answer for future reference. When using a form, the event handler for form submission needs to have
event.preventDefault()
in order to keep the default form submission and redirect from happening.
Reference