How to add values of dyanamically added fields

Question

I've tried to add new fields here, each time button '+' is clicked it adds field input. It is working fine but the problem I've stuck upon is I want to add the value of those input fields. As I am new to react I am not finding a way to achieve it. Is it possible to achieve this.

class InputFields extends React.Component{
    render(){
    return (
        <div>
          <input name={`value[${this.props.index + 1}]`} onChange={this.onChangeValue} />
        </div>

        );
    }
}

class Main extends React.Component{
  constructor(props){
      super(props);

      this.values = props.value;

      this.state={
         inputs:[],
         values:[]
      };
      this.addInputs      = this.addInputs.bind(this);
  }

  addInputs() {
     const inputs = this.state.inputs.concat(InputFields);
     this.setState({ inputs });
  }

  onChangeValue(e){
   var value = e.target.value;
   this.value =value;
   this.addValues();
  }

  addValues(){
     ...
  }

  render () {
     const inputs = this.state.inputs.map((Element, index) => {
         return <Element key={ index } index={ index } />
     });

     return <div>
             <div>
              <input name={`value[${this.props.index}]`} onChange={this.onChangeValue} />
             </div>
             <div>
              <button className="btn btn-sm btn-primary" onClick={this.addInputs}>+</button>
             </div>
            </div>
  }
}

ReactDOM.render(
 <Main />,
 document.getElementById('calculator')
 );

Answer 1

It't not required to manage two different variables to manage it, you can loop it through the array and can change the value on onChange event

import React from "react";

export default class Example extends React.Component {
  state = {
    values: [null]
  };

  add() {
    this.setState(prevState => prevState.values.push(null));
  }
  changeVal(val, index) {
    this.setState(prevState => (prevState.values[index] = parseFloat(val)));
  }
  getSum() {
    let sum = 0;
    for (let i = 0; i < this.state.values.length; i++) {
      if (this.state.values[i] !== null) {
        sum += this.state.values[i];
      }
    }
    return sum;
  }

  render() {
    return (
      <div>
        {this.state.values.map((val, index) => (
          <div key={index}>
            <input
              onChange={e => this.changeVal(e.target.value, index)}
              type="number"
              value={val}
              placeholder="Enter a value"
            />
          </div>
        ))}
        <hr />
        Sum is {this.getSum()}
        <hr />
        <button onClick={this.add.bind(this)}> +Add</button>
      </div>
    );
  }
}

Edit

Added the method getSum() and converting the number to float in changeVal() method

Codesandbox link - https://codesandbox.io/s/235o6xoxyr

Answer 2

In react, the view is a function of data: UI = fn(data)

This means that you'll write a component tree that can transform data to view. And only manipulate data, unlike what you might be familiar with in jQuery for example.

In practice, this would mean:

let a component Input handle the rendering of one input:

const Input = ({value, onChange}) =>
  <input value={value} onChange={event => event.target.value} />

in your state, only save the list of input values as strings. React will take care of transforming each value to an Input component later on

this.state = {inputs: []}

write a function responsible of adding new inputs, to the state and not the view

addInput = () => {
  this.setState({
    inputs: this.state.inputs.concat('')
  })
}

create a method that takes care of changing the value of one input in the list

changeValue = (i, newValue) => {
  this.setState({
    inputs: [
      ...this.state.inputs.slice(0, i),
      newValue,
      ...this.state.inputs.slice(i+1)]
  })
}

in the render method of Main, loop over your list of inputs and transform to a list of Input components

this.state.inputs.map(
  (input, i) =>
    <Input
      key={i}
      value={input}
      onChange={newValue => this.changeValue(i, newValue)}
    />
)