Updating state in parent ReactJS
up vote
0
down vote
favorite
I'm having a problem with managing states in ReactJS. I have created a component called "Step" that consists of a text input field and a button. The button's function is to create a "sub step" so you have a structured list like this:
- parent step
- child step
- child-child step
- child step
- parent step2
and so on.
Each step has 2 state variables: it's description (what's inside of the text input) and a list of it's own sub-steps. In my main component in which I create the parent steps I have a state array which contains all the parent steps (which contain a list of their sub steps, which contain list of their sub steps and so on).
The problem is that when I try to log this main array. For every first-level
step it shows that it has no description and no sub-steps even though it does.
My goal is to simply log the array and get all the steps (as a main step or inside of an array of another step)
This is how I add a main-level step in the main component:
export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};This is the Step component that should contain its description and all of his substeps:
export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}And this is how I log the contents of steps array from the main component:
getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};EDIT: this is what I would expect as an example output of the whole table:
"steps":[
{
"description":"asd",
"subSteps":[
{
"description":"asd",
"subSteps":[
{
"description":"hello"
}
]
}
]
},
{
"description":"aaaa"
}
]
reactjs
asked Nov 8 at 17:27
TangerEye
164
add a comment |
up vote
0
down vote
favorite
I'm having a problem with managing states in ReactJS. I have created a component called "Step" that consists of a text input field and a button. The button's function is to create a "sub step" so you have a structured list like this:
- parent step
- child step
- child-child step
- child step
- parent step2
and so on.
Each step has 2 state variables: it's description (what's inside of the text input) and a list of it's own sub-steps. In my main component in which I create the parent steps I have a state array which contains all the parent steps (which contain a list of their sub steps, which contain list of their sub steps and so on).
The problem is that when I try to log this main array. For every first-level
step it shows that it has no description and no sub-steps even though it does.
My goal is to simply log the array and get all the steps (as a main step or inside of an array of another step)
This is how I add a main-level step in the main component:
export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};This is the Step component that should contain its description and all of his substeps:
export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}And this is how I log the contents of steps array from the main component:
getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};EDIT: this is what I would expect as an example output of the whole table:
"steps":[
{
"description":"asd",
"subSteps":[
{
"description":"asd",
"subSteps":[
{
"description":"hello"
}
]
}
]
},
{
"description":"aaaa"
}
]
reactjs
asked Nov 8 at 17:27
TangerEye
164
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
1
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm having a problem with managing states in ReactJS. I have created a component called "Step" that consists of a text input field and a button. The button's function is to create a "sub step" so you have a structured list like this:
- parent step
- child step
- child-child step
- child step
- parent step2
and so on.
Each step has 2 state variables: it's description (what's inside of the text input) and a list of it's own sub-steps. In my main component in which I create the parent steps I have a state array which contains all the parent steps (which contain a list of their sub steps, which contain list of their sub steps and so on).
The problem is that when I try to log this main array. For every first-level
step it shows that it has no description and no sub-steps even though it does.
My goal is to simply log the array and get all the steps (as a main step or inside of an array of another step)
This is how I add a main-level step in the main component:
export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};This is the Step component that should contain its description and all of his substeps:
export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}And this is how I log the contents of steps array from the main component:
getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};EDIT: this is what I would expect as an example output of the whole table:
"steps":[
{
"description":"asd",
"subSteps":[
{
"description":"asd",
"subSteps":[
{
"description":"hello"
}
]
}
]
},
{
"description":"aaaa"
}
]
reactjs
asked Nov 8 at 17:27
TangerEye
164
I'm having a problem with managing states in ReactJS. I have created a component called "Step" that consists of a text input field and a button. The button's function is to create a "sub step" so you have a structured list like this:
- parent step
- child step
- child-child step
- child step
- parent step2
and so on.
Each step has 2 state variables: it's description (what's inside of the text input) and a list of it's own sub-steps. In my main component in which I create the parent steps I have a state array which contains all the parent steps (which contain a list of their sub steps, which contain list of their sub steps and so on).
The problem is that when I try to log this main array. For every first-level
step it shows that it has no description and no sub-steps even though it does.
My goal is to simply log the array and get all the steps (as a main step or inside of an array of another step)
This is how I add a main-level step in the main component:
export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};This is the Step component that should contain its description and all of his substeps:
export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}And this is how I log the contents of steps array from the main component:
getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};EDIT: this is what I would expect as an example output of the whole table:
"steps":[
{
"description":"asd",
"subSteps":[
{
"description":"asd",
"subSteps":[
{
"description":"hello"
}
]
}
]
},
{
"description":"aaaa"
}
]
export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};export default class DynamicForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
actors: ,
steps: ,
systemActorAdded: false,
};
let url = "http://localhost:8080";
}
addStep = () => {
const currentSteps = this.state.steps;
currentSteps.push(new Step());
this.setState({steps: currentSteps});
};
removeStep = () => {
const steps = this.state.steps;
steps.pop();
this.setState({steps: steps});
};export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}export default class Step extends Component {
constructor() {
super();
this.state = {
subSteps: ,
description: '',
};
}
createSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.push(new Step());
this.setState({subSteps});
};
removeSubStep = () => {
let subSteps = this.state.subSteps;
subSteps.pop();
this.setState({subSteps});
};
handleInputChange = (event) => {
event.preventDefault();
this.setState({description: event.target.value});
};
render() {
const subSteps = this.state.subSteps.map((element, index) => {
return (
<Step key={index}/>
)
});
return (
<div className="text-and-button">
<input type="text" className="form-control animated lightSpeedIn step"
placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
<button type="button" className="btn btn-success step-button animated lightSpeedIn"
onClick={this.createSubStep}>
<i className="fas fa-plus"/>
</button>
{this.state.subSteps.length > 0 ?
<button type="button" className="btn btn-danger step-button animated lightSpeedIn"
onClick={this.removeSubStep}>
<i className="fas fa-minus"/>
</button> : null}
<div className="full-width">
{subSteps}
</div>
</div>
)
}
}getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};getStepsArray = () => {
let stepArray = this.state.steps;
let steps = ;
for (let step of stepArray) {
steps.push(step.state);
}
return steps;
};reactjs
reactjs
asked Nov 8 at 17:27
TangerEye
164
asked Nov 8 at 17:27
TangerEye
164
edited Nov 8 at 18:30
asked Nov 8 at 17:27
TangerEye
164
asked Nov 8 at 17:27
TangerEye
164
asked Nov 8 at 17:27
TangerEye
164
164
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
1
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43
add a comment |
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
1
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
1
1
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
I can suggest to separate view (render of a component) and data.
answered Nov 8 at 17:49
victor zadorozhnyy
251412
add a comment |
up vote
0
down vote
I would try it this way: Since your substeps appear to be related to the main state, create the add and remove substep methods in the main component and pass them down to the Step component. Set up your main state so that state.steps is an array of objects (steps), each including substeps.
Map through the substeps in main as well and pass "substeps" down as a prop.
Since the state.description is coming from the input in the Step component (i.e., it's controlled), you could pass that back up to main state as a parameter as well. When you log the stepArray, you can then drill down to the substeps as step.substeps.
Hope that helps some!
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I can suggest to separate view (render of a component) and data.
answered Nov 8 at 17:49
victor zadorozhnyy
251412
add a comment |
up vote
0
down vote
I can suggest to separate view (render of a component) and data.
answered Nov 8 at 17:49
victor zadorozhnyy
251412
add a comment |
up vote
0
down vote
up vote
0
down vote
I can suggest to separate view (render of a component) and data.
answered Nov 8 at 17:49
victor zadorozhnyy
251412
I can suggest to separate view (render of a component) and data.
answered Nov 8 at 17:49
victor zadorozhnyy
251412
answered Nov 8 at 17:49
victor zadorozhnyy
251412
answered Nov 8 at 17:49
victor zadorozhnyy
251412
answered Nov 8 at 17:49
victor zadorozhnyy
251412
251412
add a comment |
add a comment |
up vote
0
down vote
I would try it this way: Since your substeps appear to be related to the main state, create the add and remove substep methods in the main component and pass them down to the Step component. Set up your main state so that state.steps is an array of objects (steps), each including substeps.
Map through the substeps in main as well and pass "substeps" down as a prop.
Since the state.description is coming from the input in the Step component (i.e., it's controlled), you could pass that back up to main state as a parameter as well. When you log the stepArray, you can then drill down to the substeps as step.substeps.
Hope that helps some!
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
add a comment |
up vote
0
down vote
I would try it this way: Since your substeps appear to be related to the main state, create the add and remove substep methods in the main component and pass them down to the Step component. Set up your main state so that state.steps is an array of objects (steps), each including substeps.
Map through the substeps in main as well and pass "substeps" down as a prop.
Since the state.description is coming from the input in the Step component (i.e., it's controlled), you could pass that back up to main state as a parameter as well. When you log the stepArray, you can then drill down to the substeps as step.substeps.
Hope that helps some!
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
add a comment |
up vote
0
down vote
up vote
0
down vote
I would try it this way: Since your substeps appear to be related to the main state, create the add and remove substep methods in the main component and pass them down to the Step component. Set up your main state so that state.steps is an array of objects (steps), each including substeps.
Map through the substeps in main as well and pass "substeps" down as a prop.
Since the state.description is coming from the input in the Step component (i.e., it's controlled), you could pass that back up to main state as a parameter as well. When you log the stepArray, you can then drill down to the substeps as step.substeps.
Hope that helps some!
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
I would try it this way: Since your substeps appear to be related to the main state, create the add and remove substep methods in the main component and pass them down to the Step component. Set up your main state so that state.steps is an array of objects (steps), each including substeps.
Map through the substeps in main as well and pass "substeps" down as a prop.
Since the state.description is coming from the input in the Step component (i.e., it's controlled), you could pass that back up to main state as a parameter as well. When you log the stepArray, you can then drill down to the substeps as step.substeps.
Hope that helps some!
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
edited Nov 8 at 18:25
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
answered Nov 8 at 18:17
Sarah Elizabeth Waldie
162
162
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
add a comment |
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I'm not sure if I got that right. What you meant is that I should keep all the steps (regardless of the level) in the main array? Also, don't know how the mapping should look. I have to maintain the hierarchy of the substeps so it was natural for me to have it like I do now and just print the whole array once.
– TangerEye
Nov 8 at 18:26
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
I've added the expected outcome to my question to clarify what I want to get
– TangerEye
Nov 8 at 18:31
1
1
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
In general you want to separate view (render) and data, unless it's a controlled component where the input reflects the state. You're adding data to the Step component that would better be managed in the main component. Also, to clean it up, you may want to consider separating out your view even further so Step renders the parent step and then maybe even "Substep1" and "Substep2" given the levels. Give the Step component an "add" button, give Substep1 an "add" and a "delete" button. Substep2 gets a "delete" button. Add will add a substep a level down. Delete would delete the step itself.
– Sarah Elizabeth Waldie
Nov 8 at 18:55
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Separating the logic from the view is what I would have been doing from the begginig, but since I'm still a React newbie I didn't know how.
– TangerEye
Nov 8 at 20:52
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
Currently all of the steps have an "add" button, since every step can have its substeps. The "delete" button is bound to the parent step and deletes his sub-steps one by one from the bottom (pop). The main idea is that every step can potentially have infinite substeps, so I cannot see how this "Substep1" and "Substep2" idea can be used here. I'm certainly missing something, but it may be the language barrier since English isnt my main language
– TangerEye
Nov 8 at 20:58
add a comment |
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%2f53213144%2fupdating-state-in-parent-reactjs%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
Please include your code in text format instead of as images.
– Tholle
Nov 8 at 17:31
1
Done, sorry for inconvenience
– TangerEye
Nov 8 at 17:36
You can't get step.state like you did, Step in your state are object not the component himself. You should maybe use refs if you want to do something like that.
– EQuimper
Nov 8 at 17:43