Loop of refs for input default value
up vote
1
down vote
favorite
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.
reactjs
edited Nov 9 at 20:16
Yossi
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
add a comment |
up vote
1
down vote
favorite
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.
reactjs
edited Nov 9 at 20:16
Yossi
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
Please post all of your code. If you have to change the state of an arrayfoodsyou have to make a copy and completely replace it, you can't modify the array in state.
– Ortho Home Defense
Nov 9 at 19:03
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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.
reactjs
edited Nov 9 at 20:16
Yossi
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
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.
reactjs
reactjs
edited Nov 9 at 20:16
Yossi
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
edited Nov 9 at 20:16
Yossi
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
edited Nov 9 at 20:16
Yossi
1,4332618
edited Nov 9 at 20:16
Yossi
1,4332618
edited Nov 9 at 20:16
Yossi
1,4332618
1,4332618
asked Nov 9 at 19:00
Kacper Łukasik
155
asked Nov 9 at 19:00
Kacper Łukasik
155
asked Nov 9 at 19:00
Kacper Łukasik
155
155
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
Please post all of your code. If you have to change the state of an arrayfoodsyou have to make a copy and completely replace it, you can't modify the array in state.
– Ortho Home Defense
Nov 9 at 19:03
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09
add a comment |
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
Please post all of your code. If you have to change the state of an arrayfoodsyou have to make a copy and completely replace it, you can't modify the array in state.
– Ortho Home Defense
Nov 9 at 19:03
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
Please post all of your code. If you have to change the state of an array
foods you have to make a copy and completely replace it, you can't modify the array in state.– Ortho Home Defense
Nov 9 at 19:03
Please post all of your code. If you have to change the state of an array
foods you have to make a copy and completely replace it, you can't modify the array in state.– Ortho Home Defense
Nov 9 at 19:03
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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>answered Nov 9 at 19:14
Tholle
32.7k53558
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string inaddFood, and change the rendering/onChange logic a bit.
– Tholle
Nov 9 at 19:30
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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>answered Nov 9 at 19:14
Tholle
32.7k53558
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string inaddFood, and change the rendering/onChange logic a bit.
– Tholle
Nov 9 at 19:30
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
add a comment |
up vote
1
down vote
accepted
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>answered Nov 9 at 19:14
Tholle
32.7k53558
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string inaddFood, and change the rendering/onChange logic a bit.
– Tholle
Nov 9 at 19:30
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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>answered Nov 9 at 19:14
Tholle
32.7k53558
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>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>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>answered Nov 9 at 19:14
Tholle
32.7k53558
answered Nov 9 at 19:14
Tholle
32.7k53558
answered Nov 9 at 19:14
Tholle
32.7k53558
answered Nov 9 at 19:14
Tholle
32.7k53558
32.7k53558
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string inaddFood, and change the rendering/onChange logic a bit.
– Tholle
Nov 9 at 19:30
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
add a comment |
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string inaddFood, and change the rendering/onChange logic a bit.
– Tholle
Nov 9 at 19:30
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
But what if my foods is array of objects wchich each object is stored like that food: 'pasta', calories: 23, id: '1' ?
– Kacper Łukasik
Nov 9 at 19:28
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string in
addFood, and change the rendering/onChange logic a bit.– Tholle
Nov 9 at 19:30
@KacperŁukasik That will work great as well. Then you just have to add a new object instead of an empty string in
addFood, and change the rendering/onChange logic a bit.– Tholle
Nov 9 at 19:30
1
1
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
It's working! Thank you! But can u explain me what is that "prevState => "?
– Kacper Łukasik
Nov 9 at 19:48
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
@KacperŁukasik Great! You're welcome.
– Tholle
Nov 9 at 19:52
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231826%2floop-of-refs-for-input-default-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can't represent dynamically added inputs in state instead, with e.g. an array of all the input values, and you just add another empty string to it when you add an input?
– Tholle
Nov 9 at 19:02
Please post all of your code. If you have to change the state of an array
foodsyou have to make a copy and completely replace it, you can't modify the array in state.– Ortho Home Defense
Nov 9 at 19:03
Why don't you just create an array and add data inside it and update it in the state object? while in render you can use map and iterate through each value in state and render inputs dynamically
– Saurabh Sharma
Nov 9 at 19:05
This is full code pasted.co/b845799d basically i wan't to add edit functionality into my component, if u click a edit button it shows an input with default value of food name, and i wan't to change this value.
– Kacper Łukasik
Nov 9 at 19:09