Kalashir Kalashir - 25 days ago 8
React JSX Question

If <notFound/> component get executed add class to <footer/>component . React-Redux

If < notFound /> rout get executed (i.e : if not found page get rendered I want to add class to footer component.

Below is my index.jsx render function

render() {
return (
<div>
<Navbar />
<div className="pageData">
{this.props.children}
// <notFound/> component will get rendered here
</div>
<Footer/>
<LoginPopup />
</div>
)
}


Below is my routes.jsx

import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from 'layout/app'
import Home from 'pages/home'
import MyWagers from 'containers/myWagersContainer'
import Wagers from 'containers/wagersContainer'
import NotFound from 'pages/notFound'

const ROUTES = (
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path="/wagers(/:trackCode)(/:raceNum)" component={Wagers} >
<Route path="*" component={() => (<NotFound status = "404" />)}/>
</Route>
<Route path="/mywagers" component={MyWagers} />
<Route path="*" name = "notFound" component={() => (<NotFound status = "404" />)}/>
</Route> )
export default ROUTES


So can we set something globally or can we get route name so we can add class in footer component as per < notFound / > component get rendered

leo leo
Answer

Use a callback that you pass to this.props.children and then in <NotFound />

componentWillMount() {
  this.props.setFooterClass('myclass');
}

componentWillUnmount() {
  this.props.setFooterClass('');
}

in index.js:

 <NotFound setFooterClass={myClass => this.setState({ footerClass: myClass })} />

and

 <Footer className={this.state.footerClass} />

Pass props to children

Comments