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!
From what I understand you want to push new people to the existing contactArray ? I will share with my way of doing it. Have a look:
const contactArray = [
{
name: 'John',
email: 'john#email.com',
phone: '111-111-111'
},
{
name: 'Dave',
email: 'dave#email.com',
phone: '222-222-222'
}
];
class Form extends React.Component {
constructor() {
super();
this.state = {
contacts: contactArray
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const
{ contacts } = this.state,
name = this.refs.name.value,
email = this.refs.email.value,
phone = this.refs.phone.value;
this.setState({
contacts: [...contacts, {
name,
email,
phone
}]
}, () => {
this.refs.name.value = '';
this.refs.email.value = '';
this.refs.phone.value = '';
});
}
render() {
const { contacts } = this.state;
console.log('message',this.state.contacts);
return (
<div>
<h2>Add Someone</h2>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="name" placeholder="name" />
<input type="text" ref="email" placeholder="email" />
<input type="text" ref="phone" placeholder="phone" />
<button type="submit">Submit</button>
</form>
<h2>Exsiting contacts:</h2>
<ul>
{contacts.map((contact) =>
<li>{`Name: ${contact.name} Email: ${contact.email} Phone: ${contact.phone}`}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
So first thing we do is save contactArray within our actual component where we are going to use it, next we decalre and bind our handleSubmit I am using refs for the inputs in order to get thier value. this.setState ({ contacts: [...contacts] , { Object }); Here we use the ES6 spread operator to pass all the existing contacts to our new state and add a new contact. { name, email, phone } Is exactly like doing { name:name, email:email ...} It's just a short-hand, this.setState({}, () => { Callback! }); In the callback function of this.setState({}); I am going to clear the input values. Live demo: http://codepen.io/ilanus/pen/qaXNmb
Here is another way you can do it, same results different approach.
const contactArray = [
{
name: 'John',
email: 'john#email.com',
phone: '111-111-111'
},
{
name: 'Dave',
email: 'dave#email.com',
phone: '222-222-222'
}
];
class Form extends React.Component {
constructor() {
super();
this.state = {
contacts: contactArray,
newContact: {
name: '',
email: '',
phone: ''
}
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInput = this.handleInput.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const { contacts, newContact } = this.state;
this.setState({
contacts: [...contacts, newContact],
}, () => {
for (let val in newContact) {
newContact[val] = ''; // Clear the values...
}
this.setState({ newContact });
});
}
handleInput(e, element) {
const { newContact } = this.state;
newContact[element] = e.target.value;
this.setState({ newContact });
}
render() {
const { contacts, newContact } = this.state;
const { name, email, phone } = newContact;
return (
<div>
<h2>Add Someone</h2>
<form onSubmit={this.handleSubmit}>
<input type="text" value={name} onChange={e => this.handleInput(e, 'name')} placeholder="name" />
<input type="text" value={email} onChange={e => this.handleInput(e, 'email')} placeholder="email" />
<input type="text" value={phone} onChange={e => this.handleInput(e, 'phone')} placeholder="phone" />
<button type="submit">Submit</button>
</form>
<h2>Exsiting contacts:</h2>
<ul>
{contacts.map((contact) =>
<li>{`Name: ${contact.name} Email: ${contact.email} Phone: ${contact.phone}`}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
Live demo: http://codepen.io/ilanus/pen/LRjkgx
I highly recommend using the first example. as it's performance will be better :)
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]
e.value = null will clear the value inside the form. By this, you'll able to reset the entire form.
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!!
Related
Good day,
I'm new with react.js I'm trying to create a basic data binding using onChange of the input. The problem is, I'm assigning to object with it's properties. Not directly to the property.
Now I'm receiving the error Warning: A component is changing a controlled input of type text to be uncontrolled. when I type-in a character in my inputs.
Here's my code:
interface IProps { }
interface IFloorInfo {
id: number
name: string,
type: string,
condition: string
}
interface IFloorInfoState {
floor: IFloorInfo
}
export default class Floors extends React.Component<IProps, IFloorInfoState> {
state: IFloorInfoState
constructor(props: any){
super(props)
this.state = {
floor: {
id: 0,
name: '',
type: '',
condition: ''
}
}
}
...
render() {
return (
<div>
<input type="text" value={this.state.floor.name} onChange={(e)=>this.inputChanges(e)} />
<input type="text" value={this.state.floor.type} onChange={(e)=>this.inputChanges(e)} />
<input type="text" value={this.state.floor.condition} onChange={(e)=>this.inputChanges(e)} />
</div>
)
}
}
Now this is my inputChanges method that detects if there's a changes in the input
inputChanges = (e:any) => {
this.setState({ floor: e.target.value });
}
Thank you in advance.
The problem is with your following code. According to this code, your state will be {floor: "input value"}
inputChanges = (e:any) => {
this.setState({ floor: e.target.value });
}
But what you actually want is
inputChanges = (e:any) => {
// copying all values of floor from current state;
var currentFloorState = {...this.state.floor};
// setting the current input value from user
var name = e.target.name;
currentFloorState[name] = e.target.value;
this.setState({ floor: currentFloorState });
}
As for multiple properties:
You can add name property to your element and use it in your changeHandler
render() {
return (
<div>
<input type="text" value={this.state.floor.name} name="floor" onChange={(e)=>this.inputChanges(e)} />
<input type="text" value={this.state.floor.type} name="type" onChange={(e)=>this.inputChanges(e)} />
</div>
)
}
For demo, you can refer this https://codesandbox.io/s/jolly-ritchie-e1z52
In this code, you don't specify which property that you want to bind.
inputChanges = (e:any) => {
this.setState({ floor: e.target.value });
}
What you can do, is something like this.
inputChanges = (e:any) => {
this.setState({
...this.state,
floor: { ... this.state.floor, [e.currentTarget.name]: e.currentTarget.value}
})
}
Basically, you're binding whatever property that matches inside your this.state.floor object.
I have an button that adds stuff to a few arrays. When using .push the elements add correctly (as in it looks like the for loop is used) but when I click the button a second time I get the above error. Here's some pieces of my code:
class App extends Component {
constructor(props) {
super(props);
this.state = {
key: uuid(),
title: "",
author: "",
questions: [],
answers: []
};
this.handleChange = this.handleChange.bind(this);
}
//yada yada
addQuestion = () => {
questionNum++;
this.setState({
questions: this.state.questions.concat(["question", "hi"])
});
console.log(this.state.questions);
for (var i = 0; i < 4; i++) {
this.setState({
answers: this.state.answers.push({
answerChoice: "",
key: uuid()
})
});
}
console.log(this.state.answers);
console.log(questionNum);
console.log(this.state.title);
console.log(this.state.author);
};
render() {
//yada yada
<div>
<form>
<div className="Intro">
Give your Quiz a title:{" "}
<input
type="text"
value={this.state.title}
onChange={this.handleChange}
name="title"
/>
<br />
Who's the Author?{" "}
<input
type="text"
value={this.state.author}
onChange={this.handleChange}
name="author"
/>
<br />
<br />
</div>
<div className="questions">
Now let's add some questions... <br />
{this.addQuestion}
</div>
</form>
<button onClick={this.addQuestion}>Add Question</button>
</div>;
//yada yada
}
}
export default App;
However when I replace
this.setState({
answers: this.state.answers.push({
answerChoice: '',
key: uuid()
})
})
with
this.setState({
answers: this.state.answers.concat({
answerChoice: '',
key: uuid()
})
})
it seems as though my for loop doesn't work (because four of these things are not added). I am very new to React and JS so any tips would help.
Thanks!
You should not use push, as it would alter the array currently in your state.
When you update state that is derived from what is currently in your state, it's best to give setState a function and return the state changes from that. Otherwise there is a risk of overwriting state updates, which is what is happening in your second example.
You can instead spread the current array you have in state and add your new object to it.
this.setState(previousState => {
return {
answers: [...previousState.answers, { answerChoice: '', key: uuid() }]
};
});
You can also group your state updates together and use setState only once if you would prefer:
addQuestion = () => {
questionNum++;
this.setState(previousState => {
const questions = [...previousState.questions, "question", "hi"];
const answers = [...previousState.answers];
for (var i = 0; i < 4; i++) {
answers.push({
answerChoice: "",
key: uuid()
});
}
return { questions, answers };
});
});
Let me start with an example so you guys can know what is the issue and what I want to achieve.
In my project I'll have multiple user form on the same page and number of forms will be dynamic (depends on user number if there are 3 users then 3 forms, if 10 users then 10 forms etc).
Let's assume all forms will have 3 fields (keep it simple here) like firstName , middleName , lastName.
Now let assume we have 3 users so 3 inputs will appear on the page.
<form>
<input type="text" name="firstName" value="" />
<input type="text" name="middleName" value="" />
<input type="text" name="lastName" value="" />
</form>
We have 3 users this time so above form will appear 3 times. Here actually what I have taken only one form for all 3 users. What I have done is shown below.
<form>
for (let i = 1; i <= 3; i++) {
<input type="text" name="firstName" value="" />
<input type="text" name="middleName" value="" />
<input type="text" name="lastName" value="" />
}
<input type="submit" value="Submit">Apply</button>
</form>
When user submits the form I want an array of value for each form field.
What and How result I want is below.
['tome hanks' , 'shahrukh khan', 'john'] // firstname of all 3 users
['tome hanks' , 'shahrukh khan', 'john'] // middlename of all 3 users
['tome hanks' , 'shahrukh khan', 'john'] // lastname of all 3 users
I have tried this tutorial but not exactly what I need.
Maybe I can achieve this using React state but don't know how?
If Redux is helpful than it's fine for me.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [
{ firstName: 'John1', middleName: 'Daniel1', lastName: 'Paul1' },
{ firstName: 'John2', middleName: 'Daniel2', lastName: 'Paul2' },
{ firstName: 'John3', middleName: 'Daniel3', lastName: 'Paul3' },
{ firstName: 'John4', middleName: 'Daniel4', lastName: 'Paul4' },
],
};
}
_onChangeUser = (index, field, event) => {
const newValue = event.target.value;
this.setState(state => {
const users = [
...state.users.slice(0, index),
{
...state.users[index],
[field]: newValue,
},
...state.users.slice(index + 1),
];
return {
users,
};
});
};
_onSubmit = event => {
event.preventDefault();
// Do something with this.state.users.
console.log(this.state.users);
};
render() {
return (
<div className="App">
<form onSubmit={this._onSubmit}>
{this.state.users.map((user, index) => (
<div key={index}>
<input
value={user.firstName}
onChange={this._onChangeUser.bind(this, index, 'firstName')}
/>
<input
value={user.middleName}
onChange={this._onChangeUser.bind(this, index, 'middleName')}
/>
<input
value={user.lastName}
onChange={this._onChangeUser.bind(this, index, 'lastName')}
/>
</div>
))}
<button type="submit">Submit</button>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"><div>
Ok. Declare your state variable as an array. Below should fulfill your requirement.
constructor(props){
super(props)
this.state={
firstNameArray:[],
middleNameArray:[],
lastNameArray:[],
fName:” “,
mName:””,
lName:””
}
this.changeFirstName = this.changeFirstName.bind(this);
this.changeMiddleName= this.changeMiddleName.bind(this);
this.changeLastName=this.changeLastName.bind(this);
}
changeFirstName(event){
this.setState({
firstNameArray:event.target.value,
fName: event.target.value
})
changeMiddleName(event){
this.setState({
middleNameArray: event.target.value,
mName: event.target.value
})
}
changeLastName(event){
this.setState({
lastNameArray: event.target.value,
lName: event.target.value
})
Call each function on your input field like below
<input type=‘text’ name=‘fName’ value= {this.state.fName} onChange={this.changeFirstName} />
Do it in the same way for other two input fields as well. Hope this answers your question.
Problem
I have a list of people. I want to:
Select a user to edit by clicking on their name.
Edit that user's information, so I can click the submit button and update the list.
If I click on a different name, I want to switch to that person's information without having to deliberately close the form first.
Everything works until #3. When I click on another person, the form, itself, does NOT update.
My Code
Update Component for the update form:
const UpdateForm = ({ updatePerson, personToUpdate, handleInputChange }) => {
let _name, _city, _age, _id;
const submit = (e) => {
e.preventDefault();
updatePerson({
name: _name.value,
city: _city.value,
age: _age.value,
_id: _id.value
});
};
return (
<div>
<form onSubmit={submit}>
<h3>Update Person</h3>
<label htmlFor="_id">Some Unique ID: </label>
<input type="text" name="_id" ref={input => _id = input} id="_id" defaultValue={personToUpdate._id} onChange={input => handleInputChange(personToUpdate)} required />
<br />
<label htmlFor="name">Name: </label>
<input type="text" name="name" ref={input => _name = input} id="name" defaultValue={personToUpdate.name} onChange={input => handleInputChange(personToUpdate)} />
<br />
<label htmlFor="city">City: </label>
<input type="text" name="city" ref={input => _city = input} id="city" defaultValue={personToUpdate.city} onChange={input => handleInputChange(personToUpdate)} />
<br />
<label htmlFor="age">Age: </label>
<input type="text" name="age" ref={input => _age = input} id="age" defaultValue={personToUpdate.age} onChange={input => handleInputChange(personToUpdate)} />
<br />
<input type="submit" value="Submit" />
</form>
</div>
);
};
export default UpdateForm;
Relevant parts of Person Component:
class Person extends Component {
nameClick() {
if (this.props.person._id !== this.props.personToUpdate._id) {
this.props.setForUpdate(this.props.person);
this.forceUpdate();
}
else {
this.props.toggleUpdatePersonPanel();
}
}
render() {
return (
<div>
<span onClick={this.nameClick}>
{this.props.person.name} ({this.props.person.age})
</span>
</div>
);
}
}
export default Person;
Relevant parts of PeopleList, which holds Persons:
class PeopleList extends Component {
render() {
return(
<div>
{this.props.people.map((person) => {
return <Person
key={person._id}
person={person}
updatePersonPanel={this.props.updatePersonPanel}
setForUpdate={this.props.setForUpdate}
personToUpdate={this.props.personToUpdate}
/>;
})}
</div>
);
}
} // end class
export default PeopleList;
Form Reducer, with just the relevant actions:
export default function formReducer(state = initialState.form, action) {
let filteredPeople;
switch (action.type) {
case TOGGLE_UPDATE_PANEL:
return Object.assign({}, state, { updatePersonPanel: false }, { personToUpdate: {
_id: "",
name: "",
city: "",
age: ""
}});
case SET_FOR_UPDATE:
return Object.assign({}, state, { personToUpdate: action.person }, { updatePersonPanel: true });
case UPDATE_RECORD:
filteredPeople = state.people.filter((person) => {
return person._id === action.person._id ? false : true;
}); // end filter
return Object.assign({}, state, { people: [ ...filteredPeople, action.person] }, { personToUpdate: {
_id: "",
name: "",
city: "",
age: ""
}}, { updatePersonPanel: false });
case HANDLE_INPUT_CHANGE:
return Object.assign({}, state, { personToUpdate: action.person });
default:
return state;
}
}
The relevant parts of my Initial State file:
form: {
people: [
{
_id: "adfpnu64",
name: "Johnny",
city: "Bobville",
age: 22
},
{
_id: "adf2pnu6",
name: "Renee",
city: "Juro",
age: 21
},
{
_id: "ad3fpnu",
name: "Lipstasch",
city: "Bobville",
age: 45
}
],
updatePersonPanel: false,
personToUpdate: {
_id: "",
name: "",
city: "",
age: ""
},
}
Attempts at a Solution( so far)
I have attempted to make the component a completely controlled component, by switching the form attribute to value instead of defaultValue. When I do this, the names switch just fine, but the form becomes unchangeable and useless.
My Questions
Almost all of the solutions to these kind of issues either recommend using redux-form or supply two-way binding solutions that work fine in React without reduce. I want to know how to do this with Redux without using redux-form or anything extra if possible. Is there a way to resolve this without touching lifecycle methods?
Conclusion (For now)
Well, for now, I settled for making my form uncontrolled and used some classic Js DOM methods and a lifecycle method to control the form. For whatever reason, once I employed some of the answer suggestions my browser ate up my CPU and crashed, presumably because there was some kind of infinite loop. If anyone has some further recommendations, I'd really appreciate it. For now I settle for this:
class UpdateForm extends Component {
constructor(props){
super(props);
this.submit = this.submit.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.personToUpdate._id !== this.props.personToUpdate._id) {
document.getElementById("name").value = nextProps.personToUpdate.name;
document.getElementById("age").value = nextProps.personToUpdate.age;
document.getElementById("city").value = nextProps.personToUpdate.city;
}
}
submit(e) {
e.preventDefault();
this.props.updatePerson({
name: document.getElementById("name").value,
city: document.getElementById("city").value,
age: document.getElementById("age").value,
_id: this.props.personToUpdate._id
});
}
render() {
return (
<div>
<form onSubmit={this.submit}>
<h3>Update Person</h3>
Unique ID: {this.props.personToUpdate._id}
<br />
<label htmlFor="name">Name: </label>
<input type="text" name="name" id="name" ref="name" defaultValue={this.props.personToUpdate.name} required />
<br />
<label htmlFor="city">City: </label>
<input type="text" name="city" id="city" ref="city" defaultValue={this.props.personToUpdate.city} required />
<br />
<label htmlFor="age">Age: </label>
<input type="text" name="age" id="age" ref="age" defaultValue={this.props.personToUpdate.age} required />
<br />
<input type="submit" value="Update" />
</form>
</div>
);
}
} // end class
export default UpdateForm;
I'll be soon exploring redux-form because it is evident that forms as inputs and outputs are a wonky business. For now, my little app works.
Yes there is and you are on the right path. The way is to use value instead of defaultValue but you have to read the value from a state and then use the onChange handler to modify the state.
Something like
this.state = {inputText:''}
Then in the input field
<input value={this.state.inputText} onChange={this.handleChange}/>
And the handleChange function will be
handleChange(event){
this.setState({inputText:event.target.value})
}
Remember to bind the handleChange event in the constructor so you can pass it as this.handleChange in the input field's onChange prop.
Something like this
this.handleChange = this.handleChange.bind(this)
https://facebook.github.io/react/docs/forms.html - Here are the official docs regarding it
Also if you want to do it in redux the same sort of logic applies where this will be the input field
<input value={this.props.inputText} onChange={this.props.handleChange}/>
where inputText and handleChange are redux state and action respectively passed to the component via props
For your case I guess it has to be something like where you are 'reading' values from the people array and the action bound to the onChange modifies that value in the people array in the state.
<--EDIT-->
How it can be done for the case in point. Pass the people in the redux state as a people prop to the component. Pass an action changePeople(newPeople) to the component as a prop which takes an argument newPeople and changes the people in the redux state to have the value newPeople. Since people is nested in form you'll have to do some Object.assign etc to modify the state.
Now in the component using the people props populate the checkboxes using a map function. The map function takes a second parameter index so for each checkbox have a function which sets the local state variable currentPerson to the value of the index
this.props.people.map((person,index) =>
return <Checkbox onClick={()=>this.setState(currentPerson:index)}/>
)
So everytime you click on a checkbox the currentPerson points to the corresponding index.
Now the input fields can be
<input value={this.props.people[this.state.currentPerson].name} onChange={this.handleChange.bind(this,'name')}/>
This is for the 'name' input field. It reads from the currentPerson index of the people array which has been passed down as a prop.
This is how the handleChange will be like
handleChange(property,event){
const newPeople = [
...this.props.people.slice(0, this.state.currentPerson),
Object.assign({}, this.props.people[this.state.currentPerson], {
[property]: event.target.value
}),
...this.props.people.slice(this.state.currentPerson + 1)
]
this.props.changePeople(newPeople)
}
The handleChange takes a property (so you don't have to write separate handlers for each input field). The newPeople basically modifies the element at current index this.state.currentPerson in the people passed from props (ES6 syntax being used here. If you have doubts do ask). Then it is dispatched using the changePeople action which was also passed as props.
I have a component that stores a contact object as state - {firstName: "John", lastName: "Doe", phone: "1234567890} I want to create a form to edit this object but if I want the inputs to hold the value of the original contact parameter, I need to make each input a controlled component. However, I don't know how to create a handleChange function that will adjust to each parameter because my state only holds {contact: {...}}. Below is what I currently have -
getInitialState: function () {
return ({contact: {}});
},
handleChange: function (event) {
this.setState({contact: event.target.value });
},
render: function () {
return (
<div>
<input type="text" onChange={this.handleChange} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/>
</div>
);
}
I wish in my handleChange I can do something like
handleChange: function (event) {
this.setState({contact.firstName: event.target.value });
}
There's a "simple" way to do this, and a "smart" way. If you ask me, doing things the smart way is not always the best, because I may be harder to work with later. In this case, both are quite understandable.
Side note: One thing I'd ask you to think about, is do you need to update the contact object, or could you just keep firstName etc. directly on state? Maybe you have a lot of data in the state of the component? If that is the case, it's probably a good idea to separate it into smaller components with narrower responsibilities.
The "simple" way
changeFirstName: function (event) {
const contact = this.state.contact;
contact.firstName = event.target.value;
this.setState({ contact: contact });
},
changeLastName: function (event) {
const contact = this.state.contact;
contact.lastName = event.target.value;
this.setState({ contact: contact });
},
changePhone: function (event) {
const contact = this.state.contact;
contact.phone = event.target.value;
this.setState({ contact: contact });
},
render: function () {
return (
<div>
<input type="text" onChange={this.changeFirstName.bind(this)} value={this.state.contact.firstName}/>
<input type="text" onChange={this.changeLastName.bind(this)} value={this.state.contact.lastName}/>
<input type="text" onChange={this.changePhone.bind(this)} value={this.state.contact.phone}/>
</div>
);
}
The "smart" way
handleChange: function (propertyName, event) {
const contact = this.state.contact;
contact[propertyName] = event.target.value;
this.setState({ contact: contact });
},
render: function () {
return (
<div>
<input type="text" onChange={this.handleChange.bind(this, 'firstName')} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChange.bind(this, 'lastName')} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChange.bind(this, 'phone')} value={this.state.contact.lastName}/>
</div>
);
}
Update: Same examples using ES2015+
This section contains the same examples as shown above, but using features from ES2015+.
To support the following features across browsers you need to transpile your code with Babel using e.g.
the presets es2015 and react,
and the plugin stage-0.
Below are updated examples, using object destructuring to get the contact from the state,
spread operator to
create an updated contact object instead of mutating the existing one,
creating components as Classes by
extending React.Component,
and using arrow funtions to
create callbacks so we don't have to bind(this).
The "simple" way, ES2015+
class ContactEdit extends React.Component {
changeFirstName = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
firstName: event.target.value
};
this.setState({ contact: newContact });
}
changeLastName = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
lastName: event.target.value
};
this.setState({ contact: newContact });
}
changePhone = (event) => {
const { contact } = this.state;
const newContact = {
...contact,
phone: event.target.value
};
this.setState({ contact: newContact });
}
render() {
return (
<div>
<input type="text" onChange={this.changeFirstName} value={this.state.contact.firstName}/>
<input type="text" onChange={this.changeLastName} value={this.state.contact.lastName}/>
<input type="text" onChange={this.changePhone} value={this.state.contact.phone}/>
</div>
);
}
}
The "smart" way, ES2015+
Note that handleChangeFor is a curried function:
Calling it with a propertyName creates a callback function which, when called, updates [propertyName] of the
(new) contact object in the state.
class ContactEdit extends React.Component {
handleChangeFor = (propertyName) => (event) => {
const { contact } = this.state;
const newContact = {
...contact,
[propertyName]: event.target.value
};
this.setState({ contact: newContact });
}
render() {
return (
<div>
<input type="text" onChange={this.handleChangeFor('firstName')} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChangeFor('lastName')} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChangeFor('phone')} value={this.state.contact.lastName}/>
</div>
);
}
}
ES6 one liner approach
<input type="text"
value={this.state.username}
onChange={(e) => this.setState({ username: e.target.value })}
id="username"/>
The neatest approach
Here is an approach that I used in my simple application. This is the recommended approach in React and it is really neat and clean. It is very close to ArneHugo's answer and I thank hm too. The idea is a mix of that and react forms site.
We can use name attribute of each form input to get the specific propertyName and update the state based on that. This is my code in ES6 for the above example:
class ContactEdit extends React.Component {
handleChangeFor = (event) => {
const name = event.target.name;
const value = event.target.value;
const { contact } = this.state;
const newContact = {
...contact,
[name]: value
};
this.setState({ contact: newContact });
}
render() {
return (
<div>
<input type="text" name="firstName" onChange={this.handleChangeFor} />
<input type="text" name="lastName" onChange={this.handleChangeFor}/>
<input type="text" name="phone" onChange={this.handleChangeFor}/>
</div>
);
}
}
The differences:
We don't need to assign state as value attribute. No value is needed
The onChange method does not need to have any argument inside the function call as we use name attribute instead
We declare name and value of each input in the begening and use them to set the state properly in the code and we use rackets for name as it is an attribute.
We have less code here and vey smart way to get any kind input from the form because the name attribute will have a unique value for each input.
See a working example I have in CodPen for my experimental blog application in its early stage.
There are two ways to update the state of a nested object:
Use JSON.parse(JSON.stringify(object)) to create a copy of the object, then update the copy and pass it to setState.
Use the immutability helpers in react-addons, which is the recommended way.
You can see how it works in this JS Fiddle. The code is also below:
var Component = React.createClass({
getInitialState: function () {
return ({contact: {firstName: "first", lastName: "last", phone: "1244125"}});
},
handleChange: function (key,event) {
console.log(key,event.target.value);
//way 1
//var updatedContact = JSON.parse(JSON.stringify(this.state.contact));
//updatedContact[key] = event.target.value;
//way 2 (Recommended)
var updatedContact = React.addons.update(this.state.contact, {
[key] : {$set: event.target.value}
});
this.setState({contact: updatedContact});
},
render: function () {
return (
<div>
<input type="text" onChange={this.handleChange.bind(this,"firstName")} value={this.state.contact.firstName}/>
<input type="text" onChange={this.handleChange.bind(this,"lastName")} value={this.state.contact.lastName}/>
<input type="text" onChange={this.handleChange.bind(this,"phone")} value={this.state.contact.phone}/>
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById('container')
);
Here is generic one;
handleChange = (input) => (event) => {
this.setState({
...this.state,
[input]: event.target.value
});
}
And use like this;
<input handleChange ={this.handleChange("phone")} value={this.state.phone}/>
<input> elements often have a property called name.
We can access this name property from the event object that we receive from an event handler:
Write a generalized change handler
constructor () {
super();
this.state = {
name: '',
age: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange (evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
render () {
return (
<form>
<label>Name</label>
<input type="text" name="name" onChange={this.handleChange} />
<label>Age</label>
<input type="text" name="age" onChange={this.handleChange} />
</form>
);
}
source
updatePrevData=(event)=>{
let eventName=event.target.name;
this.setState({
...this.state,
prev_data:{
...this.state.prev_data,
[eventName]:event.target.value
}
})
console.log(this.state)
}
You can do it without duplicate code and easy way
handleChange=(e)=>{
this.setState({
[e.target.id]:e.target.value
})
}
<Form.Control type="text" defaultValue={this.props.allClients.name} id="clientName" onChange={this.handleChange}></Form.Control>
<Form.Control type="email" defaultValue={this.props.allClients.email} id="clientEmail" onChange={this.handleChange}></Form.Control>
handleChange(event){
this.setState({[event.target.name]:event.target.value});
this.setState({[event.target.name]:event.target.value});
}