Best way to sharing function in react - reactjs

Question

I'm new in react. I wonder what is the best option for sharing functions (except inheritance). In inheritance way I can do something like this:
class BaseForm {
updateForm() => {};
}
class MyFormOne extends BaseForm {
// this.updateForm();
}
And I can code few Form components which extends BaseForm and I can use updateForm method in every. What is the best way in react to do this?

Answer 1

There are multiple ways for the question :
1) If the shared fnc is the static function (independent with the component). You should create a common file utils.js and then export, import function wherever you want
// utils.js
export function updateForm() { }
// MyformOne.js
import {updateForm} from './utils';
// Use fnc updateForm() in MyFormOne component
2) If the shared fnc is dependent with class component, you should use the design pattern in React : HOC (Higher Order Component) or render Props for sharing code (states, functions) between React components (render your code more abstract => a good practice for reusable)
class BaseForm extends React.Component {
constructor(props) {
super(props);
this.state = {
a1 : "",
a2 : "",
}
}
// example : share the func updateForm of Baseform
updateForm = () => {}
render() {
return (
<div>
{/*
use the `render` prop to dynamically determine what to render.
*/}
{this.props.render(this.state, this.updateForm)}
</div>
);
}
}
class WithBaseForm extends React.Component {
render() {
return (
<div>
<BaseForm render={(stateBaseForm, updateForm) => (
<MyFormOne stateBaseForm={stateBaseForm} updateForm={updateForm}/> // so MyFormOne could use the fnc updateForm of BaseForm
)}/>
</div>
);
}
}
You should view the link for more details :
https://en.reactjs.org/docs/render-props.html
https://en.reactjs.org/docs/higher-order-components.html

Answer 2

You can create a utils.js file and place your common JS functions there. Something like this:
export const updateFormCommon = (inputValue) => {
// Your function logic here
return something;
};
export const showMessage = () => {
alert('hello world');
};
Now you can import utils.js wherever you need and call your common\shared functions like this:
import {updateFormCommon, showMessage} from './utils'
let result = updateFormCommon(1000)}
showMessage();