How to fill circle border based on progress in REACTJS

Question

How to complete the border of circle based on selected option. Here is four options. 1.Head 2.Body 3.Script 4.End Note

And I have a circle on side. What I am trying to do is, Head is by default active so circle border should be red color till 25% of its total area, then after selection of body it should be 50%. So on and at the end it should 100%.

Here is my code which I tried on click its changing text color till 4 clicks but I want above kind of thing.Being beginner in ReactJS I am unable to get this logic.

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>
     )  
 }
}

If I understood correctly, you have some kind of circle (not sure where it is.. maybe your second `h1` element is circle-shaped?), and you want its border to be correspondingly filled when you select different options (home, body, etc..)? — Kox, Apr 23 '18 at 21:42
please refer this https://stackoverflow.com/questions/50207948/convert-the-circle-border-onto-clickable-function @Kox I want something like this — Mohammed Sabir, May 07 '18 at 06:19
I believe @Ron has already answered your question. https://stackoverflow.com/a/50208291/7956790 — Kox, May 07 '18 at 08:58

score 0 · Answer 1 · answered May 09 '18 at 11:46

Shoutout to @Ron for providing an answer in jquery (https://stackoverflow.com/a/50208291/7956790). Use the css provided by @Ron.
Ok, here's the render function in React:

// your previous code
render() {
 return (
  <div id="circle-container">
     <div className="quarter top-left">
       <div className="quarter-fill top-left-fill" onClick={this.handleTopLeftClick}></div>
     </div>
     <div className="quarter top-right">
        <div className="quarter-fill top-right-fill" onClick={this.handleTopRightClick}></div>
     </div>
     <div className="quarter bottom-left">
        <div className="quarter-fill bottom-left-fill" onClick={this.handleBottomLeftClick}></div>
     </div>
     <div className="quarter bottom-right">
        <div className="quarter-fill bottom-right-fill" onClick={this.handleBottomRightClick}></div>
     </div>
  </div>
 );
}

Hook your onClick listeners to your arcs, e.g. onClick={this.handleTopRightClick} and bind them in the constructor function:

constructor(props) {
super(props);
   this.handleTopLeftClick.bind(this);
   this.handleTopRightClick.bind(this);
   this.handleBottomLeftClick.bind(this);
   this.handleBottomRightClick.bind(this);
}

And now define your handler functions in your class:

handleTopLeftClick() { }
handleTopRightClick() { }
handleBottomLeftClick() { }
handleBottomLeftClick() { }

How to fill circle border based on progress in REACTJS

1 Answers1