![\"\"](\"https:\/\/benincosa.com\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-28-at-4.23.48-PM.png\")
<\/figure>\n\n\n\nAs you can see there are a few zip codes and then we can click the ‘Add Zip Code’ button and we get a new set of inputs. <\/p>\n\n\n\n
To make this work, our form code looks as follows: <\/p>\n\n\n\n
import React, {useState} from 'react';\nimport {\n Button,\n ButtonGroup,\n Col,\n Form,\n FormGroup,\n FormText,\n Input,\n Label,\n Row,\n} from 'reactstrap';\nconst MyForm = ({formSubmitFunc}) => {\n const [zipCodes, setZipCodes] = useState([\"\"]);\n const [costs, setCosts] = useState([\"\"]);\n\n return(\n <Form className=\"form\" onSubmit={formSubmitFunc}>\n { Array.apply(null, {length: zipCodes.length}).map( (row, index) =>\n <Row key={index}>\n <Col>\n {console.log(\"row: \", row, \" index: \", index, \"value: \", zipCodes[index] )}\n <FormGroup>\n <Label>Zip Codes<\/Label>\n <Input\n type=\"input\"\n value={zipCodes[index]}\n onChange={e => {setZipCode(index, e.target.value)}}\/>\n <FormText>What Zip Codes will you service?<\/FormText>\n <\/FormGroup>\n <\/Col>\n <Col>\n <FormGroup>\n <Label>Cost for service in this Zip Code<\/Label>\n <Input\n type=\"input\"\n value={costs[index]}\n onChange={(e) => setCost(index, e.target.value)}\/>\n <FormText>How much will you charge in this Zip Code for your service?<\/FormText>\n <\/FormGroup>\n <\/Col>\n <Col className=\"align-self-center\">\n { index === (zipCodes.length - 1) ?\n <ButtonGroup>\n <Button color=\"primary\" onClick={addRow}>Add Zip Code<\/Button>\n {index !== 0 &&\n <>\n \n <Button color=\"secondary\" onClick={removeRow}>Remove Zip Code<\/Button>\n <\/>\n }\n <\/ButtonGroup>\n :\n <div> <\/div>\n }\n <\/Col>\n <\/Row>\n )}\n <\/Form>\n );\n}<\/code><\/pre>\n\n\n\nThis part was pretty standard and I had no problem. The issue, however comes from the following functions: setZipCode<\/code>, setCode<\/code> , addRow<\/code>, removeRow<\/code>. <\/p>\n\n\n\nThe standard way I thought it could work was to do something like the following in setZipcode<\/code><\/p>\n\n\n\nconst setZipCode = (index, value) => {\n let c = zipCodes;\n c[index] = value;\n setZipCodes(c);\n }<\/code><\/pre>\n\n\n\nThis, however, doesn’t work at all. It seems like it should: You get the list of current zipCodes (which is a state), assign it to another variable. Then modify that variable. Next, you setZipCodes to that new variable c. <\/p>\n\n\n\n
Turns out this just doesn’t have the expected behavior. It won’t update because it looks as if nothing has changed. Instead, we need to use the spread operator. This makes it seem like its getting a brand new array and then updates. <\/p>\n\n\n\n
const setZipCode = (index, value) => {\n let c = zipCodes;\n c[index] = value;\n setZipCodes(c => [...c]);\n }<\/code><\/pre>\n\n\n\nWe can then use these spread operators on the other three functions: <\/p>\n\n\n\n
const setCost = (index, value) => {\n const c = costs;\n c[index] = value;\n setCosts(c => [...c]);\n}<\/code><\/pre>\n\n\n\nconst addRow = (e) => {\n \/\/ add zip code row for service.\n var z = zipCodes;\n setZipCodes(oldArray => [...oldArray, z[z.length - 1]]);\n\n var c = costs;\n setCosts(oldCosts => [...oldCosts, c[c.length - 1]]);\n}<\/code><\/pre>\n\n\n\nconst removeRow = (e) => {\n setZipCodes(oldArray => [...oldArray.slice(0, oldArray.length - 1)]);\n setCosts(oldArray => [...oldArray.slice(0, oldArray.length - 1)]);\n}<\/code><\/pre>\n\n\n\nNow our form gets the expected behavior and we’re able to add new zip codes as well as edit them. <\/p>\n\n\n\n
An alternative would be to just have one array full of objects [{zip: 98611, cost: $30}, {zip: 97035, cost: $30}]<\/code> and have one useState<\/code> for this. <\/p>\n\n\n\nHopefully that helps someone save time as I burned a few hours trying to figure this out!<\/p>\n","protected":false},"excerpt":{"rendered":"
I spent a good portion of the work day today trying to code up a simple form to accept a list of zip codes and put them in an array. The final form looks as follows: As you can see there are a few zip codes and then we can click the ‘Add Zip Code’…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[943],"tags":[50,944,843,945],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3759"}],"collection":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3759"}],"version-history":[{"count":1,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3759\/revisions"}],"predecessor-version":[{"id":3761,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/3759\/revisions\/3761"}],"wp:attachment":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}