Styjun

Could a complex system of reaction wheels be used to propel a spacecraft?

Group riding etiquette

Fixing a blind bolt hole when the first 2-3 threads are ruined?

Does Dovescape counter Enchantment Creatures?

Give Lightning Web Component a Prettier Name

Why does `buck` mean `step-down`?

Inspiration for failed idea?

What's the difference between a variable and a memory location?

Why did Lucius make a deal out of Buckbeak hurting Draco but not about Draco being turned into a ferret?

Is it possible for a person to be tricked into becoming a lich?

Create a list of snaking numbers under 50,000

Can a Sorcerer use the Careful Spell Metamagic option on spells with optional saving throws?

Why can't miners meet the difficulty by picking a low number for the block hash?

How to understand payment due date for credit card?

Should I use the words "pyromancy" and "necromancy" even if they don't mean what people think they do?

In what language did Túrin converse with Mím?

How can I reply to coworkers who accuse me of automating people out of work?

What checks exist against overuse of presidential pardons in the USA?

Why do motor drives have multiple bus capacitors of small value capacitance instead of a single bus capacitor of large value?

Why is "I let him to sleep" incorrect (or is it)?

How to investigate an unknown 1.5GB file named "sudo" in my Linux home directory?

Printing a list as "a, b, c." using Python

Generic method to call API functions with simple retrial on errors

Scaling arrows.meta with tranform shape

Create a Progress Bar with React Router

Loop inside React JSXreact-router - pass props to handler componentReact-router urls don't work when refreshing or writing manuallyProgrammatically navigate using react routerhow to update a route in React Router without re-mounting the component in a single page app?react-router v4 doesn't trigger routesShow progress bar BEFORE go to routeReact-Router Switch component not rendering components with same pathAssets rendering after component mounts for React (react-router) renderreact router exact path

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I'm setting up a progress bar for a 9 page-form using react-router. My goal is the bar to update 1/9 of width for each page the user goes through - using Switch and Route components.

I'm currently having issues with accessing the number of children for Switch and automating the progress bar. Of course, a workaround could be a hardcoded 1/9th every time a component mounts, but that's not ideal.

// Routes I'm want to get 'progress' from
let routes = (
 <Switch>
 <Route path="/form/" exact component=Question0 />
 <Route path="/form/1" component=Question1 />
 <Route path="/form/2" component=Question2 />
 <Route path="/form/tip1" component=Tip1 />
 <Route path="/form/3" component=Question3 />
 <Route path="/form/tip2" component=Tip2 />
 <Route path="/form/4" component=Question4 />
 <Route path="/form/tip3" component=Tip3 />
 <Route path="/form/5" component=Question5 />
 </Switch>
 );

I also tried to play around with React.Children but was unsuccessful.
Is there a more elegant solution for this? Thanks! :)

reactjs react-redux react-router

share|improve this question

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Before you move any further, let's say you had it working the way you want it, what happens if the user jumps directly to let's say /form/2? Looks like the progress should be tracked by a totally separate, stateful component that keeps track of whether each question has been answered or not.
  
  – leosteffen
  Mar 27 at 22:30
  

  
  
  
  

add a comment | 

0

I'm setting up a progress bar for a 9 page-form using react-router. My goal is the bar to update 1/9 of width for each page the user goes through - using Switch and Route components.

I'm currently having issues with accessing the number of children for Switch and automating the progress bar. Of course, a workaround could be a hardcoded 1/9th every time a component mounts, but that's not ideal.

// Routes I'm want to get 'progress' from
let routes = (
 <Switch>
 <Route path="/form/" exact component=Question0 />
 <Route path="/form/1" component=Question1 />
 <Route path="/form/2" component=Question2 />
 <Route path="/form/tip1" component=Tip1 />
 <Route path="/form/3" component=Question3 />
 <Route path="/form/tip2" component=Tip2 />
 <Route path="/form/4" component=Question4 />
 <Route path="/form/tip3" component=Tip3 />
 <Route path="/form/5" component=Question5 />
 </Switch>
 );

I also tried to play around with React.Children but was unsuccessful.
Is there a more elegant solution for this? Thanks! :)

reactjs react-redux react-router

share|improve this question

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Before you move any further, let's say you had it working the way you want it, what happens if the user jumps directly to let's say /form/2? Looks like the progress should be tracked by a totally separate, stateful component that keeps track of whether each question has been answered or not.
  
  – leosteffen
  Mar 27 at 22:30
  

  
  
  
  

add a comment | 

I'm setting up a progress bar for a 9 page-form using react-router. My goal is the bar to update 1/9 of width for each page the user goes through - using Switch and Route components.

I'm currently having issues with accessing the number of children for Switch and automating the progress bar. Of course, a workaround could be a hardcoded 1/9th every time a component mounts, but that's not ideal.

// Routes I'm want to get 'progress' from
let routes = (
 <Switch>
 <Route path="/form/" exact component=Question0 />
 <Route path="/form/1" component=Question1 />
 <Route path="/form/2" component=Question2 />
 <Route path="/form/tip1" component=Tip1 />
 <Route path="/form/3" component=Question3 />
 <Route path="/form/tip2" component=Tip2 />
 <Route path="/form/4" component=Question4 />
 <Route path="/form/tip3" component=Tip3 />
 <Route path="/form/5" component=Question5 />
 </Switch>
 );

I also tried to play around with React.Children but was unsuccessful.
Is there a more elegant solution for this? Thanks! :)

reactjs react-redux react-router

share|improve this question

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

// Routes I'm want to get 'progress' from
let routes = (
 <Switch>
 <Route path="/form/" exact component=Question0 />
 <Route path="/form/1" component=Question1 />
 <Route path="/form/2" component=Question2 />
 <Route path="/form/tip1" component=Tip1 />
 <Route path="/form/3" component=Question3 />
 <Route path="/form/tip2" component=Tip2 />
 <Route path="/form/4" component=Question4 />
 <Route path="/form/tip3" component=Tip3 />
 <Route path="/form/5" component=Question5 />
 </Switch>
 );

share|improve this question

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

share|improve this question

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

asked Mar 27 at 22:16

Phelipe MartinPhelipe Martin

522 bronze badges

1 Answer
1

active

oldest

votes

0

You can write a custom switch and use it instead of the default one:

const SwitchProgress = withRouter(props => 
 const progress = props.children.findIndex(
 route => matchPath(props.location.pathname, route.props)
 ) + 1;
 return (
 <React.Fragment>
 <div>Progress: progress / props.children.length</div>
 <Switch>
 props.children
 </Switch>
 </React.Fragment>
 )
);

share|improve this answer

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387319%2fcreate-a-progress-bar-with-react-router%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can write a custom switch and use it instead of the default one:

const SwitchProgress = withRouter(props => 
 const progress = props.children.findIndex(
 route => matchPath(props.location.pathname, route.props)
 ) + 1;
 return (
 <React.Fragment>
 <div>Progress: progress / props.children.length</div>
 <Switch>
 props.children
 </Switch>
 </React.Fragment>
 )
);

share|improve this answer

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

add a comment | 

0

You can write a custom switch and use it instead of the default one:

const SwitchProgress = withRouter(props => 
 const progress = props.children.findIndex(
 route => matchPath(props.location.pathname, route.props)
 ) + 1;
 return (
 <React.Fragment>
 <div>Progress: progress / props.children.length</div>
 <Switch>
 props.children
 </Switch>
 </React.Fragment>
 )
);

share|improve this answer

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

add a comment | 

You can write a custom switch and use it instead of the default one:

const SwitchProgress = withRouter(props => 
 const progress = props.children.findIndex(
 route => matchPath(props.location.pathname, route.props)
 ) + 1;
 return (
 <React.Fragment>
 <div>Progress: progress / props.children.length</div>
 <Switch>
 props.children
 </Switch>
 </React.Fragment>
 )
);

share|improve this answer

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

const SwitchProgress = withRouter(props => 
 const progress = props.children.findIndex(
 route => matchPath(props.location.pathname, route.props)
 ) + 1;
 return (
 <React.Fragment>
 <div>Progress: progress / props.children.length</div>
 <Switch>
 props.children
 </Switch>
 </React.Fragment>
 )
);

share|improve this answer

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges

answered Mar 27 at 22:53

UjinT34UjinT34

2,50011 gold badge33 silver badges1616 bronze badges