Accessing input value from stateless child component in parent through refs

Question

I\'m creating a program to track store inventory. I have an array of item names (strings) that I map through to generate a component that renders a heading for each item al

Answer 1

It is possible to use the onChange handler for this:

<input type="text" onChange={e => this.setState({ [value]: e.target.value })} />

The state now will look something like this:

{
  milk: 5,
  bread: 2,
  butter: 10
}

Answer 2

You are using a functional component which doesn't have a state or refs. You have two options, Either set the value as props passed down from the parent or make it a stateful component.

Stateless components must be dumb component used specifically for rendering and all logic must reside in the stateful parent component.

According to the docs

You may not use the ref attribute on functional components because they don't have instances.You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state

In first case

    function Inventory(props){
      let items = ['milk', 'bread', 'butter'],
      itemInput = items.map((val,index) => {
      return(
        <div key={index}>
          <h3>{val}</h3>
          <input type={'text'} value={props.childInput[val] || '' } onChange={(e) => props.handleChange(e, val)}/>
        </div>
      )
    })

    return(
      <div>
        {itemInput}
      </div>
    )
};

And then the parent will have the logic like

 <Inventory handleChange={this.handleChange} childInput={this.state.childInputVal}/>


 handleChange = (e, key) => {
      var childInputVal = {...this.state.childInputVal}
      childInputVal[key] = e.target.value
      this.setState({childInputVal})
 }

 state = {
      childInputVal: {}

 }

The other option is to make this component itself a stateful component

class Inventory extends React.Component {
    state= {
        inputValues: {}  
     }
   handleChange = (e, val) => {
        handleChange = (e, key) => {
         var childInputVal = {...this.state.inputValues}
         inputValues[key] = e.target.value
         this.setState({inputValues})

   }
   render() {
      let items = ['milk', 'bread', 'butter'],
      itemInput = items.map((val,index) => {
      return(
        <div key={index}>
          <h3>{val}</h3>
          <input type={'text'} value={this.state.inputValues[val] || '' } onChange={(e) => this.handleChange(e, val)}/>
        </div>
      )

    }
    return(
      <div>
        {itemInput}
      </div>
    )
}