Changing the prop value of embedded component

I have made a tab-component and a progressbar with 3 tabs. When i select the first tab i want my progressbar to be at 33%, second tab 66% and third 100%.

I need some help figuring out how to make my progress-bar change it’s value when i change tabs. The progress-meter fills up when you give a value of 0-100 in the component props.

So.. should i use redux to track the value or what do you guys suggest. Thanks a billion

Answer

You can just set the progress value in the state on click of the tab items like below

function TabProgress() {
  let [progress, setProgress] = useState(0);
  return (
    <>
      <ul>
        <li className="xxx" onClick={() => setProgress(100 / 3)}>A</li>
        <li className="xxx" onClick={() => setProgress(100 / 2)}>B</li>
        <li className="xxx" onClick={() => setProgress(100 / 1)}>C</li>
      </ul>
      <ProgressBar width="xxx" value={progress} />
    </>
  )
}

You can also render <li> dynamically to create a proper component

<ul>
 {props.tabs.map((tab, i) => (
  <li className="xxx" key={tab} onClick={() => setProgress(100 / props.tabs.length - i)}>{tab}</li>
 ))}
</ul>