How to pass parameters in React Function From 1 file to another - reactjs

Question

I am newbie to reactjs and I would like to ask if it is possible to achieve this.
I have two files, I would like to pass the ID from Home.js to DataModel.js
Heres my code:
DataModel.js
const axios = require('axios');
const base_url = 'https://jsonplaceholder.typicode.com';
function getUSers(id) {
return axios.get(base_url + '/users/' + id)
}
export const getUSers = getUSers(id);
=================================
Home.js
import { getUSers } from './DataModels';
class Home extends Component {
constructor(props){
super(props);
this.state = {
records: ''
}
}
render(){
let id = 2;
getUsers(id); // -----> How to pass this ID?
return (
<div>
//Codes
</div>
);
}
}

Answer 1

Assuming your DataModel.js exists in the same origin src folder as your component. You can minimize your file by using some ES6 JavaScript.
import axios from "axios"
const base_url = 'https://jsonplaceholder.typicode.com';
export const getUsers = (id) => {
return axios.get(base_url + '/users' + id)
}
Then in Home.js you should call that function in componentDidMount() which is the React life-cycle method that is triggered after the component has first rendered (after first displaying the content).
import { getUsers } from './DataModels';
class Home extends Component {
constructor(props){
super(props);
this.state = {
records: ''
}
}
componentDidMount(){
let id = 2
getUsers(id)
.then((res) => {
this.setState({
records: res.data
})
})
}
render(){
return (
<div>
//Codes
</div>
);
}
}

Answer 2

Add your fetch in componentDidMount().
// Data Model
function getUsers(id) {
return axios.get(base_url + '/users' + id) // return a promise
}
export const getUsers; // named-export function
// Component
class Home extends Component {
...
async componentDidMount() {
let id = 2; // for sample use only
const users = await getUsers(id);
console.log(users); // verify if fetched correctly
}
...
}
Do not put any side effects in render() that can alter the state of the component. Say if you store user in state variable.
this.state = {
users: {},
}
async fetch = id => {
const users = await getUsers(id)
this.setState({ users }) // altering state.users
}
render() {
fetch(2) // BAD: should not be inside render.
// This will cause many re-renders if you alter state.users
}