Loop of refs for input default value - reactjs

Question

I wan't to add a default value to dynamically added inputs. So i want to render refs by loop. I tried something like this
this.state.foods.forEach(el=> this[el.id] = React.createRef() )
but it doesn't work. Any idea to render refs dynamically? I run this loop inside of a constructor.

Answer 1

Instead of storing refs for a dynamic amount of inputs you can store each food as a string in an array and update a string when its corresponding input change. This way you just have to add an empty string to the array to add a new food.
Example
class App extends React.Component {
state = {
foods: ["fish", "beef", "pasta"]
};
onChange = (index, food) => {
this.setState(prevState => {
const foods = [...prevState.foods];
foods[index] = food;
return { foods };
});
};
addFood = () => {
this.setState(({ foods }) => ({ foods: [...foods, ""] }));
};
render() {
return (
<div>
{this.state.foods.map((food, index) => (
<div>
<input
key={index}
value={food}
onChange={event => this.onChange(index, event.target.value)}
/>
</div>
))}
<button onClick={this.addFood}>Add food</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<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="root"></div>