Here the code https://codesandbox.io/s/yqxr2z02pv
I am using this code so i dont need setState one by one onUpdate
onUpdate = (event) => {
const { target: { name, value } } = event
console.log(value);
this.setState({ [name]: value })
}
But the component not show the value when input value changed.
Any simple example can made this working?
Instead of duplicating the state in the Parent and the Child you can keep the state just in the Parent component and pass them down as props. You could also put the name prop on your inputs and use the onUpdate prop directly to pass along the event.
Example
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: "firstName",
lastName: "lastName"
};
}
onUpdate = event => {
const {
target: { name, value }
} = event;
this.setState({ [name]: value });
};
render() {
const { firstName, lastName } = this.state;
return (
<div>
<h2>Parent</h2>
Value in Parent Component State firstName: {firstName}
<br />
Value in Parent Component State lastName: {lastName}
<br />
<Child
onUpdate={this.onUpdate}
firstName={firstName}
lastName={lastName}
/>
</div>
);
}
}
class Child extends React.Component {
render() {
const { firstName, lastName, onUpdate } = this.props;
return (
<div>
<h4>Child</h4>
first Name
<input
type="text"
placeholder="type here"
name="firstName"
onChange={onUpdate}
value={firstName}
/>
<br />
last Name
<input
type="text"
name="lastName"
placeholder="type here"
onChange={onUpdate}
value={lastName}
/>
</div>
);
}
}
ReactDOM.render(<Parent />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>Try making an object first and adding the dynamic key to that like so
onUpdate = (event) => {
const { target: { name, value } } = event
console.log(value);
const newData = {};
newData[name] = value;
this.setState(newData);
}
I edit your code. you can try. https://codesandbox.io/s/m37wlryy78?fontsize=14
Child.js
import React from "react";
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
lastName: ""
};
}
update = e => {
this.props.onUpdate(e);
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<div>
<h4>Child</h4>
first Name
<input
type="text"
placeholder="type here"
onChange={this.update}
value={this.state.firstName}
name={"firstName"}
/>
<br />
last Name
<input
type="text"
placeholder="type here"
onChange={this.update}
value={this.state.lastName}
name={"lastName"}
/>
</div>
);
}
}
export default Child;
