[
{
"path": ".gitignore",
"content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# testing\ncoverage\n\n# production\nbuild\n\n# misc\n.DS_Store\n.idea/\n.env\nnpm-debug.log\n"
},
{
"path": ".nvmrc",
"content": "6.2.1"
},
{
"path": "README.md",
"content": "### Tutorial: React.js Controlled Form Components\n\nThis repo is the companion to my blog post, [React.js Controlled Form Components](http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components/).\n\n[DEMO](http://lorenstewart.me/react-controlled-form-components/)\n\nTo get started:\n 1. Make sure you're using Node 6 or higher (4 and higher will work, though)\n 2. `npm install create-react-app -g` (if you don't have it installed already)\n 3. `npm install`\n 4. `npm run start`\n 5. Open [http://localhost:3000/](http://localhost:3000/) in your browser\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-form-components\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"devDependencies\": {\n \"react-scripts\": \"0.6.1\"\n },\n \"dependencies\": {\n \"react\": \"^15.3.2\",\n \"react-dom\": \"^15.3.2\",\n \"spectre.css\": \"^0.1.27\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n }\n}\n"
},
{
"path": "public/fake_db.json",
"content": "{\n \"ownerName\": \"\",\n \"petSelections\": [\"dog\", \"cat\", \"rabbit\", \"iguana\", \"pony\", \"ferret\", \"fish\", \"bird\"],\n \"selectedPets\": [\"dog\", \"cat\", \"ferret\"],\n \"ageOptions\": [\"18 - 25\", \"26 - 59\", \"60 or older\"],\n \"ownerAgeRangeSelection\": \"\",\n \"siblingOptions\": [\"yes\", \"no\"],\n \"siblingSelection\": [\"yes\"],\n \"currentPetCount\": 0,\n \"description\": \"\"\n}"
},
{
"path": "public/index.html",
"content": "\n\n \n \n \n \n \n React App\n \n \n \n \n \n\n"
},
{
"path": "src/App.js",
"content": "import React, { Component } from 'react';\nimport '../node_modules/spectre.css/dist/spectre.min.css';\nimport './styles.css';\nimport FormContainer from './containers/FormContainer';\n\nclass App extends Component {\n render() {\n return (\n \n
\n
\n
React.js Controlled Form Components
\n \n \n
\n
\n\t\t
\n\t\t
\n\t\t\t{props.options.map(option => {\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t);\n\t\t\t})}\n\t\t
\n\t
\n\t\t\n\t\t\t\n\t\t\t{props.options.map(opt => {\n\t\t\t\treturn (\n\t\t\t\t\t{opt}\n\t\t\t\t);\n\t\t\t})}\n\t\t\n\t
\n);\n\nSelect.propTypes = {\n\tname: React.PropTypes.string.isRequired,\n\toptions: React.PropTypes.array.isRequired,\n\tselectedOption: React.PropTypes.string,\n\tcontrolFunc: React.PropTypes.func.isRequired,\n\tplaceholder: React.PropTypes.string\n};\n\nexport default Select;"
},
{
"path": "src/components/SingleInput.js",
"content": "import React from 'react';\n\nconst SingleInput = (props) => (\n\t\n\t\t\n\t\t\n\t
\n);\n\nSingleInput.propTypes = {\n\tinputType: React.PropTypes.oneOf(['text', 'number']).isRequired,\n\ttitle: React.PropTypes.string.isRequired,\n\tname: React.PropTypes.string.isRequired,\n\tcontrolFunc: React.PropTypes.func.isRequired,\n\tcontent: React.PropTypes.oneOfType([\n\t\tReact.PropTypes.string,\n\t\tReact.PropTypes.number,\n\t]).isRequired,\n\tplaceholder: React.PropTypes.string,\n};\n\nexport default SingleInput;"
},
{
"path": "src/components/TextArea.js",
"content": "import React from 'react';\n\nconst TextArea = (props) => (\n\t\n\t\t\n\t\t\n\t
\n);\n\nTextArea.propTypes = {\n\ttitle: React.PropTypes.string.isRequired,\n\trows: React.PropTypes.number.isRequired,\n\tname: React.PropTypes.string.isRequired,\n\tcontent: React.PropTypes.string.isRequired,\n\tresize: React.PropTypes.bool,\n\tplaceholder: React.PropTypes.string,\n\tcontrolFunc: React.PropTypes.func.isRequired\n};\n\nexport default TextArea;"
},
{
"path": "src/containers/FormContainer.js",
"content": "import React, {Component} from 'react';\nimport CheckboxOrRadioGroup from '../components/CheckboxOrRadioGroup';\nimport SingleInput from '../components/SingleInput';\nimport TextArea from '../components/TextArea';\nimport Select from '../components/Select';\n\nclass FormContainer extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\townerName: '',\n\t\t\tpetSelections: [],\n\t\t\tselectedPets: [],\n\t\t\tageOptions: [],\n\t\t\townerAgeRangeSelection: '',\n\t\t\tsiblingOptions: [],\n\t\t\tsiblingSelection: [],\n\t\t\tcurrentPetCount: 0,\n\t\t\tdescription: ''\n\t\t};\n\t\tthis.handleFormSubmit = this.handleFormSubmit.bind(this);\n\t\tthis.handleClearForm = this.handleClearForm.bind(this);\n\t\tthis.handleFullNameChange = this.handleFullNameChange.bind(this);\n\t\tthis.handleCurrentPetCountChange = this.handleCurrentPetCountChange.bind(this);\n\t\tthis.handleAgeRangeSelect = this.handleAgeRangeSelect.bind(this);\n\t\tthis.handlePetSelection = this.handlePetSelection.bind(this);\n\t\tthis.handleSiblingsSelection = this.handleSiblingsSelection.bind(this);\n\t\tthis.handleDescriptionChange = this.handleDescriptionChange.bind(this);\n\t}\n\tcomponentDidMount() {\n\t\tfetch('./fake_db.json')\n\t\t\t.then(res => res.json())\n\t\t\t.then(data => {\n\t\t\t\tthis.setState({\n\t\t\t\t\townerName: data.ownerName,\n\t\t\t\t\tpetSelections: data.petSelections,\n\t\t\t\t\tselectedPets: data.selectedPets,\n\t\t\t\t\tageOptions: data.ageOptions,\n\t\t\t\t\townerAgeRangeSelection: data.ownerAgeRangeSelection,\n\t\t\t\t\tsiblingOptions: data.siblingOptions,\n\t\t\t\t\tsiblingSelection: data.siblingSelection,\n\t\t\t\t\tcurrentPetCount: data.currentPetCount,\n\t\t\t\t\tdescription: data.description\n\t\t\t\t});\n\t\t\t});\n\t}\n\thandleFullNameChange(e) {\n\t\tthis.setState({ ownerName: e.target.value }, () => console.log('name:', this.state.ownerName));\n\t}\n\thandleCurrentPetCountChange(e) {\n\t\tthis.setState({ currentPetCount: e.target.value }, () => console.log('pet count', this.state.currentPetCount));\n\t}\n\thandleAgeRangeSelect(e) {\n\t\tthis.setState({ ownerAgeRangeSelection: e.target.value }, () => console.log('age range', this.state.ownerAgeRangeSelection));\n\t}\n\thandlePetSelection(e) {\n\t\tconst newSelection = e.target.value;\n\t\tlet newSelectionArray;\n\t\tif(this.state.selectedPets.indexOf(newSelection) > -1) {\n\t\t\tnewSelectionArray = this.state.selectedPets.filter(s => s !== newSelection)\n\t\t} else {\n\t\t\tnewSelectionArray = [...this.state.selectedPets, newSelection];\n\t\t}\n\t\tthis.setState({ selectedPets: newSelectionArray }, () => console.log('pet selection', this.state.selectedPets));\n\t}\n\thandleSiblingsSelection(e) {\n\t\tthis.setState({ siblingSelection: [e.target.value] }, () => console.log('siblingz', this.state.siblingSelection));\n\t}\n\thandleDescriptionChange(e) {\n\t\t// const textArray = e.target.value.split('').filter(x => x !== 'e');\n\t\t// console.log('string split into array of letters',textArray);\n\t\t// const filteredText = textArray.join('');\n\t\t// this.setState({ description: filteredText }, () => console.log('description', this.state.description));\n\t\tthis.setState({ description: e.target.value }, () => console.log('description', this.state.description));\n\t}\n\thandleClearForm(e) {\n\t\te.preventDefault();\n\t\tthis.setState({\n\t\t\townerName: '',\n\t\t\tselectedPets: [],\n\t\t\townerAgeRangeSelection: '',\n\t\t\tsiblingSelection: [],\n\t\t\tcurrentPetCount: 0,\n\t\t\tdescription: ''\n\t\t});\n\t}\n\thandleFormSubmit(e) {\n\t\te.preventDefault();\n\n\t\tconst formPayload = {\n\t\t\townerName: this.state.ownerName,\n\t\t\tselectedPets: this.state.selectedPets,\n\t\t\townerAgeRangeSelection: this.state.ownerAgeRangeSelection,\n\t\t\tsiblingSelection: this.state.siblingSelection,\n\t\t\tcurrentPetCount: this.state.currentPetCount,\n\t\t\tdescription: this.state.description\n\t\t};\n\n\t\tconsole.log('Send this in a POST request:', formPayload);\n\t\tthis.handleClearForm(e);\n\t}\n\trender() {\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n}\n\nexport default FormContainer;\n"
},
{
"path": "src/index.js",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n"
},
{
"path": "src/styles.css",
"content": "body {\n padding-bottom: 80px;\n}\nform {\n border: 3px solid #ccc;\n padding: 0 20px 25px 20px;\n border-radius: 10px;\n}\ninput[type=checkbox],\ninput[type=radio] {\n margin-right: 8px;\n}\n.form-label.capitalize {\n text-transform: capitalize;\n}\n.checkbox-group {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n}\n.checkbox-group .form-label {\n width: 50%;\n}\ninput[type=submit],\n.btn-link {\n margin-top: 20px;\n}"
}
]