Within my parent component I am rendering an input component looking like this
<InputField
name='source'
type='text'
input={(e) => this.inputValue(e)}
inputValue={value} />
Within my parent I need to use the name, given to this child component for a state. It should look like this
this.state = {
inputValue: {
source: "Whatever is written in the input",
text: "The value of the second input"
}
}
So within my parent I want to access the props name that I give to my child components. This way the state of the parent should dynamically uodate to the different InputFields it is rendering. My function looks like this
inputValue(e) {
this.setState({
inputValue: {
thisShouldBeTheChildsName: e.target.value
}
})
}
So how can I access the given name within this function inside of the parent?
You could pass the props name
as an argument to the inputValue parent function and then update the state like
this.setState({
inputValue: {
...this.state.inputValue,
[key]: e.target.value
}
})
Note that here [key]
is used to update state object with a dynamic key and ...this.state.inputValue,
is a spread operator syntax to keep all the other values in inputValue
state.
See this answer for an explanation of what ...
do:
What is the meaning of this syntax "{...x}" in Reactjs
DEMO
class App extends React.Component {
state = {
inputValue: {}
}
inputValue(e, key) {
console.log(key, e.target.value);
this.setState({
inputValue: {
...this.state.inputValue,
[key]: e.target.value
}
})
}
render() {
return (
<div>
<InputField
name='source'
type='text'
input={(e, key) => this.inputValue(e, key)}
inputValue={this.state.inputValue['source'] || ''} />
<InputField
name='text'
type='text'
input={(e, key) => this.inputValue(e, key)}
inputValue={this.state.inputValue['text'] || ''} />
</div>
)
}
}
class InputField extends React.Component {
render() {
return (
<div>
<input type={this.props.type} value={this.props.inputValue} onChange ={(e) => this.props.input(e, this.props.name)}/>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"><div>