I have an array named products, that has 4 different products. By mapping it, I created 4 different resizable divs, like this:
{products.map((item, index) => {
return (
<div key={index} style={{ margin: "8px 0px 0px 0px", display: "flex" }}>
<div className="resizable-switch-column">
<div className="switch-container">
<div className="switch-bar"/>
</div>
</div>
</div>
);
})}
My question is:, how can I resize all of those divs at the same time? If I resize the second one, for example, all the other 3 divs must be resized at once.
Here is my CSS code:
.switch-container {
background-color: var(--background-secondary);
border-radius: 4px;
height: 16px;
margin: auto 0px;
width: 100%;
}
.switch-bar{
background-color: var(--color-primary-chrome20);
border: 1px var(--color-primary-lighten2) solid;
border-radius: 4px;
max-width: calc(100% - 1px);
overflow: auto;
height: 14px;
resize: horizontal;
}
.switch-bar::-webkit-resizer {
background-color: transparent;
}
This is how it works at the moment.
Maybe you can store the width inline with the useState hook.
const [width, setWidth] = useState('100%');
<div style={{width: width}} yourDraggingFunction={() => whenDragging()} />
const whenDragging = () => setWidth(someWidthVariable);
Think of this as more pseudo code and don't take it so literally. The goal is to manipulate a single state variable regardless of the which element you resize.