Is there a way to align all elements in a single line when using dynamic percentage widths? I noticed that some of the elements are wrapping to a new line, likely due to margins not being included in the width calculation. Any suggestions on how to fix this?
Below is my code snippet:
import React, { useState, useEffect } from 'react';
const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const Dummy2 = () => {
const [arr, setArr] = useState([]);
const [length, setLength] = useState(10);
useEffect(() => {
generateArray();
}, [length]);
const generateArray = () => {
const temp = [];
for(let i = 0; i < length; i++) {
temp.push(randomIntFromInterval(7, 107));
}
setArr(temp);
}
const handleLength = (e) => {
setLength(e.target.value);
}
const maxVal = Math.max(...arr);
return (
<div>
<div className="array-container" style={{height: '50%'}}>
{arr.map((value, idx) => (
<div className="array-element"
key={idx}
style={{height: `${(value * 100 / maxVal).toFixed()}%`,
width: `${100 / length}%`,
margin: '0 1px',
display: 'inline-block',
backgroundColor: 'black'}}
></div>))
}
</div>
<div>
<button onClick={() => generateArray()}>New array</button>
</div>
<div className="slider-container">
1
<input type="range"
min="1"
max="100"
onChange={(e) => handleLength(e)}
className="slider"
id="myRange"
/>
100
</div>
{length}
</div>
);
}
export default Dummy2;