useEffect(() => {
if(readyToSend){
let data = {
"email":"example.org",
"newsletter": true
};
let jsonData = JSON.stringify(data);
let encodedData = encodeURIComponent(jsonData);
let url = "https://example/receiver/external"
let fetchUrl = url + "?datajsonstr=" + encodedData + "&_=" + (new Date()).valueOf();
let datafetch = fetch(fetchUrl);
datafetch.then(data => {
props.setDataDone(true)
})
}})
I don't want to hardcode the values in my code. The values may come from Form (TextField).
You'll want to store the values of your inputs in state so that when your form is submitted you can stringify the state, and upload it to your server.
Here's a working version with a mock API, and here's the code.
const { useState } = React;
function mockApi(data) {
return new Promise((res, rej) => {
setTimeout(() => res(`${data} stored`), 2000);
});
}
function Example() {
// Set state as an object
const [ form, setForm ] = useState({});
// When the form is submitted call the API endpoint
// with the JSON
async function handleSubmit(e) {
e.preventDefault();
const msg = await mockApi(JSON.stringify(form));
console.log(msg);
}
// Every time an input's value changes,
// update the state
function handleChange(e) {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
}
return (
<form onSubmit={handleSubmit} onChange={handleChange}>
<input type="text" name="name" required />
<input type="password" name="password" required />
<button type="submit">Submit</button>
</form>
);
};
ReactDOM.render(
<Example />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>