I have one function inside a React component. I want to use it outside of a simple HTML application. Is there any way that I can do that? i have provide you my code from which I'm trying. Or you can give me any other solution from which i can solve my problem. Thanks
I'm trying with this example formUtils.js
export function validateFormData(formData) {
// your validation logic here
if (formData.name === "") {
return "Name is required";
}
if (formData.email === "") {
return "Email is required";
}
// more validation logic here
return null; // return null if validation passes
}
Form.js
import React, { useState } from "react";
import { validateFormData } from "./formUtils";
export default function Form() {
const [formData, setFormData] = useState({ name: "", email: "" });
const handleSubmit = (event) => {
event.preventDefault();
const validationError = validateFormData(formData);
if (validationError) {
alert(validationError);
} else {
// submit the form data
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={formData.name}
onChange={(event) =>
setFormData({ ...formData, name: event.target.value })
}
/>
</label>
<label>
Email:
<input
type="email"
value={formData.email}
onChange={(event) =>
setFormData({ ...formData, email: event.target.value })
}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
App.js
import logo from './logo.svg';
import './App.css';
import Form from "./Form";
import { validateFormData } from "./formUtils";
window.validateFormData = validateFormData;
function App() {
return (
<div className="App">
<Form />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Outside of React Application in a HTML file
<html>
<head>
</head>
<body>
<script>
const formData = { name: "John", email: "john@example.com" };
const validationError = window.validateFormData(formData);
if (validationError) {
alert(validationError);
} else {
// submit the form data
}
</script>
</body>
</html>
but coming error
index.html:8 Uncaught TypeError: window.validateFormData is not a function
at index.html:8:40
