Paulos3000 Paulos3000 - 2 months ago 11
React JSX Question

React form, to submit object which is then pushed to array

I'm new to React and unsure about how to do this.

I have an array of objects that I have mapped through and rendered in my view. What I want to do is set up a form that will submit the values of each field to the corresponding properties of a new object, but I'm not sure how to go about doing this.

Here is my initial data, which is rendered in the view:

contactArray = [
{
name: 'John'
email: 'john@email.com'
number: 111-111-111
},
{
name: 'Dave'
email: 'dave@email.com'
phone: '222-222-222'
}
]


Then I have a form:

class InputForm extends Component {
render() {
return (
<form>
<input type='text' onChange={this.handleChange}/>
<input type='text' onChange={this.handleChange}/>
<input type='text' onChange={this.handleChange}/>
<button type='submit' onSubmit={this.handleSubmit}>SUBMIT</button>
</form>
)
}


Then I assume I declare the state as this:

constructor(props) {
super(props);
this.state = {
name: '',
email: '',
phone: ''
}
}


Then the submission function I don't really know how to handle...

handleSubmit() {
// not sure about this...
this.setState({
name: // ????
email: // ????
phone: // ????
})
}


And then I want to clear the submit form, as well as the object that is used to push the new object, which is now in the array (I hope that makes sense...)

So, I'm not even sure how to use state in this scenario, but ultimately I want to
push()
the new object to the array that is rendered, with all the properties as they were completed in the form.

Sorry I can't be more complete with my working up to this point, but would at least appreciate some pointers on this!

Thanks in advance.




UPDATE:



Pranesh Ravi - thanks for the JSFiddle. I understand pretty much all of it, couple of things that puzzled me a bit:

formSubmit(e) {
const details = {}
e.target.childNodes.forEach( el => {
if (el.tagName === 'INPUT')
details[el.name] = el.value
el.value = null
})
const newContacts = this.state.contacts.slice() // ???



  1. el.value = null
    : why are you assigning the
    null
    value here? And when I
    console.log(details)
    I see (as I would expect) an object which has the correct properties and empty strings as values, but not
    null
    ...

  2. Lastly,
    const newContacts = this.state.contacts.slice()
    : What is the point in executing the .slice() method on this array, and doesn't it need at least one argument to do anything anyway?



Otherwise I can see exactly how you've done this, and it's really helpful! I just want to understand it 100%, without glossing over anything.

Answer

You don't need to set state for all the inputs. If you do, it'll be a problem when you have more input fields. See the below fiddle, in that, I've used a single state to store the entire contacts. When you press the submit button, it get all the values from the input and save it to the state. Hope it helps!

Fiddle: http://jsfiddle.net/Pranesh456/8u4uz5xj/1/

[UPDATE]

  1. e.value = null will clear the value inside the form. By this, you'll able to reset the entire form.
  2. slice() is used to make a copy of the array in the state. As assignment of array is a reference to the original array, any operation on the new array will also reflect in the original array.

Example:

a = [1,2,4]
b = a
b.push(7)
console.log(b) //prints [1,2,4,7]
console.log(a) //also prints [1,2,4,7]

But

b = a.slice() //creates a copy of a
b.push(7)
console.log(b) //prints [1,2,4,7]
console.log(a) //also prints [1,2,4]

More details about slice

By doing this, you'll not mutate the existing state, which is a good practice.

Hope it help!!