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

Answer 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