Skip to content

Instantly share code, notes, and snippets.

@zackify
Last active January 30, 2020 19:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zackify/b63011b28a9702c8a5555ba9c19bffa3 to your computer and use it in GitHub Desktop.
Save zackify/b63011b28a9702c8a5555ba9c19bffa3 to your computer and use it in GitHub Desktop.
//map and use Form over and over, add a button to add another field to state. All up to you
//Form doesn't render a form element, this way it works in rn and web, and wherever else.
// you can wrap all of them in one if you want.
const App = () => {
let [values, setValues] = React.useState([{name: 'test'}])
return values.map((value, index) => (
<Form
values={values}
onValues={values => setValues(values.map((value, currentIndex) => currentIndex === index ? values : value))}
>
<Input name="name" />
<AddPerson onClick={() => setValues([...values, {}])} />
</Form>
));
};
const App = () => {
let [values, setValues] = React.useState({
email: 'test',
people: [{name: 'test'}],
});
return (
<Form
values={values}
onValues={setValues}
>
<Input name="email" />
{values.people.map((person, index) => <Input name={`people[${index}].name`} />)}
<Submit />
</Form>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment