React.js stepper

Question!

Hello I am trying to build my footer which is basically a stepper that would inform users where they are in the app.

Footer(Stepper) component :

export default class Footer extends Component {

  render() {
    return (
       <MuiThemeProvider>
         <div className="row">
          <div className="footer">
          <div className="container-fluid" style={containerStyle}>
              <div className="col-sm-12">
                <div className="steps" style={stepStyle}><img src={trailerGray} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={clockIcon} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={shieldGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
              </div>
            </div>
          </div>
      </div>
  </MuiThemeProvider>
  );
 }
}

I would like to make the div that wraps the images to change background-color depending on the route

And I add my footer component to other views :

<Footer />

I am using react-router

Could you suggest a path that I should go with? Also any suggestions are greatly welcomed.Thanks



Answers

You could store the path in a state of a reducer. Get that state in your footer and add a second style depending if the path is the good one in the step of the stepper.



MUL requires all operands to be registers, so you must use the form MUL r0, rn, r0 where rn is some other suitable register.

If the result and the first operand are the same the result is unpredictable as the error says. This is due to the internal operation of the processor. This is why you must use r0, rn, r0 and not r0, r0, rn



Alternatively, you could omit return and block braces, but the function body should be one liner with implicit return:

render() {
  return(
    <div>
      {array.map((element, index) => <MyComponent disturbingVariable={100 + index}/>)}
    </div>
  )
}

More about implicit return here

By : leo


This video can help you solving your question :)
By: admin