React - dynamic progress bar

Question

I want to make a dynamic progress bar. I have a question, and under it are options to choose. If someone chooses some options, then the progress bar should move. It has to be updated depending on the number of checked-out questions. I have function handleProgress, which is responsible for the updates of the state when someone clicks on the question. Currently, she does nothing because I have no idea how she should send information that the question has been checked out. Below is my code, or maybe someone will give me some hints as to what my functional bay should do, the progress bar updates.

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          progressValue: 0
        };
      }

      handleProgress = () => {
        console.log("halo");
      };

      render() {
        return (
          <Styles>
            <h1>🏁 React Final Form Example</h1>
            <Progress value={this.state.progressValue} />
            <Wizard
              initialValues={{ employed: true }}
              onSubmit={() => {
                window.alert("Hello");
              }}
            >
              <Wizard.Page>
                <p>Page1</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page1" component="input" type="radio" value="1" />
                  <Field name="page1" component="input" type="radio" value="2" />
                  <Field name="page1" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page2</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page2" component="input" type="radio" value="1" />
                  <Field name="spage2" component="input" type="radio" value="2" />
                  <Field name="page2" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page3</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page3" component="input" type="radio" value="1" />
                  <Field name="page3" omponent="input" type="radio" value="2" />
                  <Field name="page3" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
              <Wizard.Page>
                <p>Page4</p>
                <div id="div" onClick={this.handleProgress}>
                  <Field name="page4" component="input" type="radio" value="1" />
                  <Field name="page4" component="input" type="radio" value="2" />
                  <Field name="page4" component="input" type="radio" value="3" />
                </div>
              </Wizard.Page>
            </Wizard>
          </Styles>
        );
      }
    }

This is my whole code https://codesandbox.io/s/8l5qn573o2

Please create stackblitz link

Just code
– Just code

2019-01-09 12:32:54 +00:00
Commented Jan 9, 2019 at 12:32 — Just code
– Just code, Commented Jan 9, 2019 at 12:32
@Justcode I edit my post, I add link to codesandbox ;)

Elder
– Elder

2019-01-09 12:37:28 +00:00
Commented Jan 9, 2019 at 12:37 — Elder
– Elder, Commented Jan 9, 2019 at 12:37

Harish Soni · Accepted Answer · 2019-01-09 13:57:41Z

1

You can use the Progress Bar from ReactStrap. You need to pass the value of the current progress inside it.

I have forked and changed you codesandbox the new in here https://codesandbox.io/s/40w557p680

I have added nextPage and previousPage props as function to your wizard component.

       <Wizard
          nextPage={this.handlePageChange} //this one
          previousPage={this.handlePageBack} //this one
          initialValues={{ employed: true }}
          onSubmit={() => {
            window.alert("Hello");
          }}
       >

now on this function I have added this statement:

handlePageChange = page => {
    console.log(page);
    this.setState({ progressValue: (page + 1) * 25 });
};

handlePageBack = page => {
    this.setState({ progressValue: this.state.progressValue - 25 });
  };

Inside your wizard component:

this.state = {
      page: 1,

changed the default value to 1, to get easier calculation:

now on the next button I m calling the prop function:

<button
     onClick={() => this.props.nextPage(this.state.page)}
     type="submit"
     >
     Next »
</button>

Check the working example in codesandbox link

edited Jan 9, 2019 at 13:57

answered Jan 9, 2019 at 13:51

Harish Soni

1,89414 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harish Soni Over a year ago

then just modify the calculations. glad to help, please accept this as answer if your concern of this question is solved and give it a upvote for my efforts.

Harish Soni Over a year ago

on change of the radio button change the progress

Collectives™ on Stack Overflow

React - dynamic progress bar

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related