Posted November 6, 2018
Going to keep this short, because, by the time you most likely find this post, all you want is to just see it work, then copy and paste and get back to coding...
First imports these were required at minimum, though you will also need the 'final-form' package.
import React from "react";
import { Form, Field } from "react-final-form";
import { FieldArray } from 'react-final-form-arrays'
import arrayMutators from 'final-form-arrays'
import Checkbox from "@material-ui/core/Checkbox";
Setup your array of options:
const myOptions = ["Meat Lover", "Veggie Heaven", "Hawaii-5-0", "Inferno"];
Setup your onSubmit method:
const onSubmit = async values => {
window.alert(JSON.stringify(values, 0, 2));
};
This is your custom component using standard input of type checkbox:
const CheckboxGroup = ({ fields, options }) => {
const toggle = (event, option) => {
if (event.target.checked) fields.push(option);
else fields.remove(option);
};
return (
<div style={{ color: "blue" }}>
{options.map(option => (
<div key={option}>
<input
type="checkbox"
onClick={event => toggle(event, option)}
/>
{option}
</div>
))}
</div>
);
};
This is a more fancy custom component using Material-UI Checkbox:
const CheckboxGroupMUI = ({ fields, options }) => {
const toggle = (event, option) => {
if (event.target.checked) fields.push(option);
else fields.remove(option);
};
return (
<div style={{ color: "darkblue" }}>
{options.map(option => (
<div key={option}>
<Checkbox
value={option}
onChange={event => toggle(event, option)}
/>
{option}
</div>
))}
</div>
);
};
Ok now here's the main part:
function App() {
return (
<div>
<h3>Checkboxes FML</h3>
<Form
onSubmit={onSubmit}
mutators={{
...arrayMutators
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<label>Pizza using Custom Checkbox Group</label>
<FieldArray
name="pizzas-1"
component={CheckboxGroup}
options={myOptions}
/>
<hr />
<label>Pizza using Custom Material-UI Checkbox Group</label>
<FieldArray
name="pizzas-2"
component={CheckboxGroupMUI}
options={myOptions}
/>
<hr />
<div>
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
And here it is in action:
Hope this helps. If you have questions, please post below.
Top comments (7)
HI! Thank you for a nice article! Just noticed a little problem - according to the docs,
fields.remove
accepts an index of item, not an item itself, source: npmjs.com/package/react-final-form...The first issue, fields.remove. Here is the updated toggle function:
The "default checked" issue. Here is the updated code:
And
inArray
function:And
arrayCompare
helper function:Thank you so much. I was able to render the textfield just fine but was having trouble with checkboxes. This is exactly what I needed!
Beautiful and concise. Exactly how I like my tutorials.
The Material ui version is missing the checked attribute for the checkbox, so it won't process any existing values
@marc Were you able to find a solution to this problem? I am trying to set my checkboxes to default checked but it wont allow users to uncheck them.
I am trying to set my checkboxes to default checked but it wont allow users to uncheck them. Do you know of a solution?