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,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
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,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
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,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
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,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
edited Nov 9 at 20:16
Yossi
1,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
edited Nov 9 at 20:16
Yossi
1,5192619
edited Nov 9 at 20:16
Yossi
1,5192619
edited Nov 9 at 20:16
Yossi
1,5192619
1,5192619
asked Nov 9 at 19:00
Kacper Łukasik
176
asked Nov 9 at 19:00
Kacper Łukasik
176
asked Nov 9 at 19:00
Kacper Łukasik
176
176
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
33.2k53558
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
33.2k53558
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
33.2k53558
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
33.2k53558
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
33.2k53558
answered Nov 9 at 19:14
Tholle
33.2k53558
answered Nov 9 at 19:14
Tholle
33.2k53558
answered Nov 9 at 19:14
Tholle
33.2k53558
33.2k53558
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
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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