reactjs - REACTJS の進行状況に基づいて円の境界線を塗りつぶす方法

Question

選択したオプションに基づいて円の境界を完成させる方法。ここに 4 つのオプションがあります。1.ヘッド 2.ボディ 3.スクリプト 4.エンドノート

そして、私は側に円を持っています。私がやろうとしているのは、ヘッドはデフォルトでアクティブであるため、円の境界線はその総面積の 25% まで赤色であり、ボディの選択後は 50% になるはずです。そして最後には 100% になるはずです。

これは、4回クリックするまでテキストの色を変更しようとしたコードですが、上記のようなものが必要です。ReactJSの初心者であるため、このロジックを取得できません。

import React, { Component } from "react";


export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
       title: "Click here",
       color:"red",
       active:false,
      clicks: 0,
    }
 }
 getInitialState() {
  return {
    count: 0
  };
}

 changeTitle = () => {
  this.setState((prevState) => ({
    clicks: prevState.clicks + 1,
    title: "New title",color:"green",active:true,
 }));

 };

 render() {

     return (
     <div>
       <div>count:{this.state.clicks}</div>
       <h1 onClick={this.changeTitle.bind(this)} >Hello World </h1>
       <h1 style={this.state.clicks===1 ? {color:"red"}: 
                 (this.state.clicks===2)?{color:"yellow"}:
                 (this.state.clicks===2)?{color:"black"}:
                 {color:"green"}}>This is Magic: {this.state.title}</h1>;
     </div>
     )  
 }
}