React js dynamic input field value to state

Question

How to pass dynamic input field value to state as an array and update the value when user changes the input again?

Input field was generated by JSON data and in the state, we cannot define the initial value for all. Can anyone give some advice for this kind of problem?

this.state = { 
file:[{value1,value2}]
};

and input field is generated like

{this.state.language.map((item,index) =>
<div className="be-checkbox inline" key={index} >
 <input type="text"  onChange={this.handleChange.bind(this, index)} value={this.state.index} />
</div>
)}

Can you update your question with the relevant code that your are using, so its easy to help — Shubham Khatri, Jun 04 '17 at 08:06
You want to update the array inside the state or the full state? — Inacio Schweller, Jun 04 '17 at 08:23
Hi there, i need that value inside array like this.state = { file:[{value1,value2}]}; and input field is generated like {this.state.language.map((item,index) =>

)} Thanks in advance — Dinesh Ghimire, Jun 04 '17 at 08:24
Possible duplicate of [How can i create input text fields dynamically in react js - JSX?](https://stackoverflow.com/questions/36235923/how-can-i-create-input-text-fields-dynamically-in-react-js-jsx) — Inacio Schweller, Jun 04 '17 at 08:27
Possible duplicate of [How to implement a dynamic form with controlled components in React.JS?](https://stackoverflow.com/questions/42316604/how-to-implement-a-dynamic-form-with-controlled-components-in-react-js) — Mayank Shukla, Jun 04 '17 at 08:32

score 5 · Answer 1 · answered Jun 04 '17 at 08:09

Add onChange and value in every input like below.

<input type="text" onChange={this.handleChange.bind(this, index)} value={this.state.index}/>

Add the function to be called

handleChange(name, e){
    var change = {};
    change[name] = e.target.value;
    this.setState(change);
  }

score 2 · Answer 2 · edited Jun 05 '22 at 14:20

2

Using React Hooks:

const [data, setData] = useState({});
//create an onInputChange function for the inputs this way
const onInputChange = async e => {
  const {name, value} = e.target;
  //check to validate if entry is not a number
  if(isNaN(name)){
    data[name] = value;
    
    //somehow update data
    setData({...data})
  }
}

edited Jun 05 '22 at 14:20

Jakob Schödl

380
2
16

answered May 15 '21 at 18:20

Vicheans

65
1
5

This solution reassigns the value stored at `data[name]` to value and works against the design of immutable state in React. If you want to respect React's design, you should clone data, assign the value to the clone, and then pass that clone back into state using `setData()` – kevin Apr 11 '23 at 05:20

Rex · Answer 3 · 2018-02-12T02:19:39.943

Variable Inputs with JSON Values

You can build a model to store the new values in and two methods, one to handle new values and another for updating state. You can then call map() on the keys from your JSON data inside your array and produce an input for each entry.

class MyFormComponent extends React.Component {
    inputValues = new Map();

    onInputChange(evt, key){
        inputValues.set(key, evt.target.value);
    }

    updateState() {
        const update = inputValues.reduce((updater, value) => {
           return {...updater, value} // assuming value === {key: value} from your example, because {value, value} is not valid JSON
        }, {});

        this.setState({
            file: [JSON.stringify(update)]
        });
    }

    render(
       const keys = Object.keys(JSON.parse(this.state.file[0]))

       return keys.map(key => {
             // onChange will give you new values to your map model. 
            <input 
                type="text"
                key={key}
                onChange={eve => this.onInputChange(evt, key)}
            />
        });
    }   
}

Now call this.updateState() whenever you want to update the state with the current input values.

eg <input ... onBlur={this.updateState} />

React js dynamic input field value to state

3 Answers3

Using React Hooks:

Variable Inputs with JSON Values