Fetch axios response to new window or new url - reactjs

Question

i'm created one dropdown that used for querying the database and show the result as axios response . but right now i can only use it in console.log(res.data) what i want is something like load response in new url or new file.
full react code:
import React from "react";
import axios from 'axios';
class Inference extends React.Component {
constructor(props) {
super(props);
this.state = {
courses: [],
course: "",
model: "",
options: [
{ label: "model1", value: "model1" },
{ label: "model2", value: "model2" },
{ label: "model3", value: "model3" },
],
};
this.handleChangeCourse = this.handleChangeCourse.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange = event => {
this.setState({ model: event.target.value });
};
handleChangeCourse = event => {
this.setState({ course: event.target.value });
};
getUnique(arr, comp) {
const unique = arr
//store the comparison values in array
.map(e => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter(e => arr[e])
.map(e => arr[e]);
return unique;
}
handleSubmit(event) {
event.preventDefault();
axios.post('http://localhost:5000/getmodell', {
model: this.state.model,
dataset:this.state.course
})
.then((res) => {
// Res.data is the response from your server
console.log(res.data);
});
}
componentDidMount() {
axios.get('http://localhost:5000/files')
.then(response => this.setState({ courses: response.data }));
}
render() {
const uniqueCouse = this.getUnique(this.state.courses, "dataset");
const courses = this.state.courses;
const course = this.state.course;
const options = this.state.options;
const filterDropdown = courses.filter(function(result) {
return result.dataset === course;
});
return (
<div className="container">
<div className="row">
<form onSubmit={this.handleSubmit.bind(this)}>
<div className="col-4"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}>
<label style={{ paddingTop: "5px", marginTop: "40px" }}>
Dataset
<select classname="custom-select"
value={this.state.course}
onChange={this.handleChangeCourse} style={{ paddingTop: "5px", marginTop: "10px" }}
>
{uniqueCouse.map(course => (
<option key={course.id} value={course.dataset}>
{course.dataset}
</option>
))}
</select>
</label>
<div className="col-4">
<button
type="submit"
class="btn"
style={{ marginTop: "" }}
>
ok
</button>
</div>
<div>
{filterDropdown.map(course => (
<div key={course.id} style={{ margin: "10px" }}>
<img src={`${course.path}`} height="80" className="card-img-top img-responsive" alt="img"/>
<br />
</div>
))}
</div>
</div>
<div
className="col-4"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}
>
<label
className=""
style={{ paddingTop: "5px", marginTop: "40px" }}
>
Model
<select
className="custom-select"
name="example"
value={this.state.model}
onChange={this.handleChange}
style={{ paddingTop: "5px", marginTop: "10px" }}
>
<option>--Select--</option>
{options.map((option) => (
<option
value={option.value}
onChange={(e) => this.setState({ model: e.target.value })}
>
{option.label}
</option>
))}
</select>
</label>
</div>
</form>
</div>
</div>
);
}
}
export default Inference;
this code works perfectly fine i can able to see the results in console log. i want to see the results in new url or stores as new json. kindly help me