CODEWITHSUNDEEP
javascripthtmldomreactjs
newprint
newprint

Reputation: 7136

How to resize the component depending on the size of its sibling in React?

I have two sibling components, and the one on the left is changing the height. Its sibling on the right should change its height to the same size.

How do I accomplish something this in React?

Upvotes: 1

Views: 1320

Answers (1)

David Gilbertson
David Gilbertson

Reputation: 4863

Here's how I would set it up:

  1. Have a store, and in that store, have a value thingyHeight and set it to some default.
  2. In a component that will change its height, have an event handler (perhaps on mouseup or something) that updates the value of 'thingyHeight` in the store.
  3. Pass the value of thingyHeight to your right component.

This is what people are referring to when they talk about 'declarative' programming. You are declaring how your component should know its height (by the thingyHeight prop you pass it), you are not telling it how or when to change it's height (that's called imperative).

When the value changes in the store, React will re-render and set the new height if it needs to.

Upvotes: 2

Related Questions