Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Earth - Ringo #28

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add formField value to state and set fields to clear on submission
  • Loading branch information
ringolingo committed Jan 5, 2021
commit 3167f4dd300fa614384fa4e45894dcbb04d80b22
59 changes: 52 additions & 7 deletions src/components/PlayerSubmissionForm.js
Original file line number Diff line number Diff line change
@@ -5,31 +5,38 @@ import './PlayerSubmissionForm.css';

const PlayerSubmissionForm = ({sendSubmission, index}) => {
const [formFields, setFormFields] = useState([
// make this an array of key/value, where the key is the key and the value is an object with the other info?
'The',
{
key: 'adj1',
placeholder: 'adjective',
value: '',
},
{
key: 'noun1',
placeholder: 'noun',
value: '',
},
{
key: 'adv',
placeholder: 'adverb',
value: '',
},
{
key: 'verb',
placeholder: 'verb',
value: '',
},
'the',
{
key: 'adj2',
placeholder: 'adjective',
value: '',
},
{
key: 'noun2',
placeholder: 'noun',
value: '',
},
'.',
]);
@@ -61,23 +68,61 @@ const PlayerSubmissionForm = ({sendSubmission, index}) => {
}
}).join(' ');
sendSubmission(line);

setFormFields([
// make this an array of key/value, where the key is the key and the value is an object with the other info?
'The',
{
key: 'adj1',
placeholder: 'adjective',
value: '',
},
{
key: 'noun1',
placeholder: 'noun',
value: '',
},
{
key: 'adv',
placeholder: 'adverb',
value: '',
},
{
key: 'verb',
placeholder: 'verb',
value: '',
},
'the',
{
key: 'adj2',
placeholder: 'adjective',
value: '',
},
{
key: 'noun2',
placeholder: 'noun',
value: '',
},
'.',
]);
};

return (
<div className="PlayerSubmissionForm">
<h3>Player Submission Form for Player #{ index + 1 }</h3>
<h3>Player Submission Form for Player #{ index }</h3>

<form className="PlayerSubmissionForm__form" onSubmit={ submitLine } >

<div className="PlayerSubmissionForm__poem-inputs">
{/* update these so they aren't just hardcoded to the formFields array indices */}
The
<input name='adj1' placeholder="adjective" type="text" value='' onChange={onInputChange} />
<input name='noun1' placeholder="noun" type="text" value='' onChange={onInputChange} />
<input name='adv' placeholder="adverb" type="text" value='' onChange={onInputChange} />
<input name='verb' placeholder="verb" type="text" value='' onChange={onInputChange} />
<input name='adj1' placeholder={ formFields[1]['placeholder'] } type="text" value={ formFields[1]['value'] } onChange={onInputChange} />
<input name='noun1' placeholder={ formFields[2]['placeholder'] } type="text" value={ formFields[2]['value'] } onChange={onInputChange} />
<input name='adv' placeholder={ formFields[3]['placeholder'] } type="text" value={ formFields[3]['value'] } onChange={onInputChange} />
<input name='verb' placeholder={ formFields[4]['placeholder'] } type="text" value={ formFields[4]['value'] } onChange={onInputChange} />
the
<input name='adj2' placeholder="adjective" type="text" value='' onChange={onInputChange} />
<input name='noun2' placeholder="noun" type="text" value='' onChange={onInputChange} />
<input name='adj2' placeholder={ formFields[6]['placeholder'] } type="text" value={ formFields[6]['value'] } onChange={onInputChange} />
<input name='noun2' placeholder={ formFields[7]['placeholder'] } type="text" value={ formFields[7]['value'] } onChange={onInputChange} />
.
{/* {
// Put your form inputs here... We've put in one below as an example