Getting a value of inputs populated Dynamically React.js

Question

I am pretty new to React, I have worked on react native before, so I am quite familiar with a framework. Basically I have an array of objects, lets say in contains 5 items. I populated views based on the amount of objects, so if there are 5 objects, my map function would populate 5 together with 5 inputs. My question is how can I get a value of each input? Here is my code:

array.map(map((item, index) => (
    <h1> item.title </h1>
    <input value={input from user} />
)

Answer 1

You have to use the state and update the value with onChange manually

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: ''
    }
  }
  handleInputChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={(e) => {this.handleInputChange(e)}} />

      </div>
    )
  }
}

ReactDOM.render(<App />,  document.getElementById('app'))

Answer 2

A quick solution would be to use an array for all the input values.

const Inputs = ({array}) => {
    const [inputs, setInputs] = useState([]);

    const setInputAtIndex = (value, index) => {
        const nextInputs = [...inputs]; // this can be expensive

        nextInputs.splice(index, 1, value);

        setInputs(nextInputs);
    }

    return (
        ...
        array.map((item, index) => (
            <div key={index}>
                <h1>{item.title}</h1>
                <input
                    value={inputs[index]}
                    onChange={({target: {value}) => setInputAtIndex(value, index)}
                />
            </div>
        )
        ...
    );
}

Keep in mind here that in this case every time an input is changed, the inputs state array is copied with [...inputs] . This is a performance issue if your array contains a lot of items.