How to download files with Axios

A simple example using the Blob() constructor:

export function someFunction(values) { return (dispatch) => { ... const method = 'GET'; const url = 'http://go.api/download_file'; ... axios .request({ url, method, responseType: 'blob', //important }) .then(({ data }) => { const downloadUrl = window.URL.createObjectURL(new Blob([data])); const link = document.createElement('a'); link.href = downloadUrl; link.setAttribute('download', 'file.zip'); //any other extension document.body.appendChild(link); link.click(); link.remove(); }); }; }

Custom onChange in React Final Form

Let’s take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that: You should pass your function as a parameter and after that just call it inside of the onChange method

Example:

const FormGroupAdapter = ({ input, inputOnChange }) => { const inputProps = { ...input, onChange: e => { input.onChange(e); inputOnChange && inputOnChange(e); } }; return <input {...inputProps} />; }; const handleChange = event => { console.log("!!!", event.target.value); }; const App = () => ( <Form ... render={({ handleSubmit, reset, submitting, pristine, values }) => ( <form onSubmit={handleSubmit}> <div> <label>some label</label> <Field name="someField" component={FormGroupAdapter} inputOnChange={handleChange} /> </div> ... </form> )} /> ); 

Live example

Rename the key name in the javascript object

How to rename the key name in the javascript object? That’s easy!

Lets create function to do that:

const renameKey = (object, key, newKey) => { const clonedObj = clone(object); const targetKey = clonedObj[key]; delete clonedObj[key]; clonedObj[newKey] = targetKey; return clonedObj; };

Here is clone function:

const clone = (obj) => Object.assign({}, obj);

Example:

let contact = { id: 1, name: "contact name" }; contact = renameKey(contact, 'id', 'value'); contact = renameKey(contact, 'name', 'label'); console.log(contact); // { value: 1, label: "contact name" };

Reset values in React Final Form w/ keepDirtyOnReinitialize

How to reset values with keepDirtyOnReinitialize in React Final Form after submitting.

The Issue

If keepDirtyOnReinitialize is applied to your form, then form.reset() no longer able to remove field’s value.

The Solution

The Solution is simple— if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> and change keepDirtyOnReinitialize back to true.

<Form onSubmit={onSubmit} keepDirtyOnReinitialize render={({ handleSubmit, form }) => ( <form onSubmit={(event) => { const promise = handleSubmit(event); promise && promise.then(() => { form.setConfig('keepDirtyOnReinitialize', false); form.reset(); form.setConfig('keepDirtyOnReinitialize', true); }) return promise; }} > ... </form> }/>

Reset values in React Final Form

How to reset values in React Final Form after submitting

At first I wrote the following code:

<Form onSubmit={onSubmit} render={({ handleSubmit, form }) => ( <form onSubmit={event => { handleSubmit(event).then(() => { form.reset(); }) }} > ... </form> }/>

If we implement a function like this, we will get an error “Uncaught TypeError: Cannot read property ‘then’ of undefined”, when we try to submit invalid form. Invalid forms — form with validation errors.

The solution

To avoid this error, we need to place handleSubmit(event) to a variable, and if the variable is not undefined call .then().

onSubmit={(event) => { const promise = handleSubmit(event); promise && promise.then(() => { form.reset(); }) return promise; }}