You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Having trouble dynamically updating marks on the line. My goal is to conditionally render marks on a timeline. Our domain is around a year, with each step representing a minute.
After updating the marks state variable, the renderMark function does not seem to correctly render.
If I resize the parent container, the component updates and the marks suddenly appear.
import{Thumb}from"./components/Thumb"import{Track}from"./components/Track"exportconstTimeline=({
min,
max,
step,
initialValues
}: {min?: number,max?: number,step?: number,initialValues?: number[],})=>{const[values,setValues]=useState<number[]>(initialValues??[MAX_TIME])const[marks,setMarks]=useState<number[]>([]);return(<divstyle={{padding: '20px',display: 'flex',justifyContent: 'center',flexWrap: 'wrap'}}><Rangemin={min??MIN_TIME}max={max??MAX_TIME}step={step??STEP}values={values}onChange={(values: number[])=>setValues(values)}renderMark={({ props, index })=>{if(marks.includes(index)){return(<div{...props}style={{
...props.style,height: '15px',width: '5px',backgroundColor: 'gray',}}/>)}else{returnundefined;}}}renderThumb={Thumb}renderTrack={Track}/><div>{values[0]}</div><buttononClick={()=>setMarks([100,200,300])}>
Set Marks
</button></div>)}
The text was updated successfully, but these errors were encountered:
Having trouble dynamically updating marks on the line. My goal is to conditionally render marks on a timeline. Our domain is around a year, with each step representing a minute.
After updating the
marks
state variable, therenderMark
function does not seem to correctly render.If I resize the parent container, the component updates and the marks suddenly appear.
The text was updated successfully, but these errors were encountered: