Skip to content

Instantly share code, notes, and snippets.

@MostlyFocusedMike
Last active July 31, 2019 03:35
Show Gist options
  • Save MostlyFocusedMike/1449f1a7064e5add0e5c8245819190b1 to your computer and use it in GitHub Desktop.
Save MostlyFocusedMike/1449f1a7064e5add0e5c8245819190b1 to your computer and use it in GitHub Desktop.
import React, { useState } from 'react';
const Form = () => {
const [ownerState, setOwnerState] = useState({
owner: '',
description: '',
});
const handleOwnerChange = (e) => setOwnerState({
...ownerState,
[e.target.name]: [e.target.value],
});
const blankCat = { name: '', age: '' };
const [catState, setCatState] = useState([
{ ...blankCat },
]);
const addCat = () => {
setCatState([...catState, { ...blankCat }]);
};
return (
<form>
<label htmlFor="owner">Owner</label>
<input
type="text"
name="owner"
id="owner"
value={ownerState.owner}
onChange={handleOwnerChange}
/>
<label htmlFor="description">Description</label>
<input
type="text"
name="description"
id="description"
value={ownerState.description}
onChange={handleOwnerChange}
/>
<input
type="button"
value="Add New Cat"
onClick={addCat}
/>
{
catState.map((val, idx) => {
const catId = `name-${idx}`;
const ageId = `age-${idx}`;
return (
<div key={`cat-${idx}`}>
<label htmlFor={catId}>{`Cat #${idx + 1}`}</label>
<input
type="text"
name={catId}
data-idx={idx}
id={catId}
className="name"
/>
<label htmlFor={ageId}>Age</label>
<input
type="text"
name={ageId}
data-idx={idx}
id={ageId}
className="age"
/>
</div>
);
})
}
<input type="submit" value="Submit" />
</form>
);
};
export default Form;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment