dynamic list containing another dynamic list in react

Question

it seems like a stupid question but its been bugging me for a while now.

assume that my render function displays a list like so:

render(){
return (
  <div>
  <button onClick={()=>{this.setState({dummyList2:[...this.state.dummyList2,<h2>world</h2>]})}}> add to dummy list 2 </button>
   {this.state.dummyList1.map(el=>el)}
  </div>
)

and my state in the constructor is as follows:

state={
dummyList2:[]
dummyList1:[<h1>{this.state.dummyList2.map(el=>el)}</h1>]
}

the behavior I expect is clicking the button would add item to dummyList2 and since I am rendering dummyList1 which contains the second list, it should display the updated elements however this is not working and I'm not sure why

Thanks in advance!

EDIT

For a better view of what I am trying to achieve, I have created a sandbox

You have to use prevState while assigning the new element to the array. If you don't do so it may lead to inconsistency. Also, where do you have dummyList2 inside dummyList1? — luckongas
– luckongas, Commented Jan 8, 2021 at 23:32
@luckongas I'm trying to simplify my issue as much i can :D. basically what i am doing is i have a react-grid-layout component and what i am trying to do is have nested ones basically the idea is i have a toolbox through which a user can drag items to the parent grid and can also drag items to the child grid as well .. i succeeded in updating the state i can see it changing and the componentDidUpdate is getting fired however the .map for the the line where i call {this.state.dummyList2.map(el=>el)} is only getting called once. state update isnt getting picked up — Essameldeen Youssef
– Essameldeen Youssef, Commented Jan 8, 2021 at 23:41
since I am rendering the parent grid layout's children with a map and then when a user drags a second grid layout inside the parent grid layout the children render of the second grid layout is done with a map as well. — Essameldeen Youssef
– Essameldeen Youssef, Commented Jan 8, 2021 at 23:43
Can you provide a full component example? From what you have shown when you set dummy list 1 to use dummy list 2,. Dummy list 2 is empty. As the constructor does not get called after initialization you will need to update dummy list 1 inside componentDidUpdate. — SBUK-Tech
– SBUK-Tech, Commented Jan 8, 2021 at 23:56
While setting the state, you are doing it on dummyList2, so why is supposed to be re-rendered dummyList1 with any new elements? — luckongas
– luckongas, Commented Jan 8, 2021 at 23:58

luckongas · Accepted Answer · 2021-01-09 01:03:11Z

1

I checked your code. By doing on the constructor this:

this.state = {
  ...this.state,
  dummyList1: [
    <div>
      <h1>hello</h1>
      {this.state.dummyList2.map((el) => el)}
    </div>
  ]
};

You are creating a copy of the dummyList2 and It's not going to be re-render because it's resolved on the constructor, so is not going to be updated. What's happening is that after the component constructor is executed the dummyList1 is

dummyList1: [
  <div>
    <h1>hello</h1>
    <h2>world</h2>
  </div>
]

without any reference to dummyList2

If you are trying to render the dummyList2 components inside the HTML that you put inside dummyList1 I'll suggest passing the dummyList2 as a child as I did in this example

Hope it helps. Anything else that I can help you with let me know.

answered Jan 9, 2021 at 1:03

luckongas

1,80911 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic list containing another dynamic list in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related