Using props given to a child within the parent component in react

Question

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?

This is unclear. Precise your question, provide a minimal example, using code snippet or code sand box. — kind user, Jul 22 '17 at 11:17
All I need to do is get the value I provided as 'name' to the child within my parent component. — Sinan Theuvsen, Jul 22 '17 at 11:22
You can use ref for this or the child component name should be a state in the parent — Madura Pradeep, Jul 22 '17 at 12:28

score 1 · Accepted Answer · answered Jul 22 '17 at 12:39

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>

Thanks a lot. That is exactly what I was looking for. – Sinan Theuvsen Jul 22 '17 at 13:36 — Sinan Theuvsen, Jul 22 '17 at 13:36

Using props given to a child within the parent component in react

1 Answers1