What is wrong with this code "this.props.params.filter" on react-router

Question

I'm working with react-router-dom V4.2.2 and i have this code ****EDITED****

<BrowserRouter>
<div>
<Switch>
    <Route exact path="/" component={App}/>
    <Route exact path="/list-days" component={App}>
        <Route exact path=":filter" component={App}/>
    </Route>
    <Route exact path="/add-day" component={App}/>
    <Route component={Whoops404}/>
</Switch>
</div>
</BrowserRouter>

and this

const filteredDays=(!filter || !filter.match(/sunny|rainy/))? days : days.filter(day => day[filter] )

and this

<thead>
        <tr>
            <th>Date</th>
            <th>Resort</th>
            <th>Rain</th>
            <th>Sun Shine</th>
        </tr>
        <tr>
            <td colSpan={4}>
                <Link to="/list-days" className="sub-li">All Days</Link>
                <Link to="/list-days/rainy" className="sub-li">Rainy Days</Link>
                <Link to="/list-days/sunny" >Sunny Days</Link>
            </td>
        </tr>
        </thead>
        <tbody>
            {filteredDays.map((day,i)=>
                <PartyDayRow Key={i}
                             {...day} />
                )}
        </tbody>

and finally this

render() {
        return (
            <div className="app">
            <Menu/>
            {(this.props.location.pathname==="/")? <PartyDayCount total={this.countDays()} rain={this.countDays("rainy")} dry={this.countDays("sunny")}/> :
             (this.props.location.pathname==="/add-day")? <AddDayForm/> : <PartyDayList days={this.state.allPartyDays} filter={this.props.params.filter} />
            }   
            </div>
            )
    }

I'm trying to make it such that when I click on rainy days or sunny Days, it filters the result using "filteredDays" but it isn't working. I keep getting this error that says "TypeError: Cannot read property 'filter' of undefined" and I noticed the error comes from this "filter={this.props.params.filter}". What am I doing wrong?

@Shubham this is not a duplicate trust me...This answer to this question is not on that thread,i have seen the topic. if you can help me please do. — John Anisere, Oct 14 '17 at 17:58
The path params can be obtained in React-router v4 as `this.props.match.params.filter` and not `this.props.params.filter` and that is there in the answer to the duplicate question. Let me know if it doesnt solve your problem — Shubham Khatri, Oct 14 '17 at 18:00
@Shubham Now its runs "whoops.js" when i click on it..what am i doing wrong?Please — John Anisere, Oct 14 '17 at 18:09
@Shubham whoops.js runs when you enter a wrong path .i routed it like this — John Anisere, Oct 14 '17 at 18:13
Its difficult to provide an answer to your question unless you provide a proper flow as to which code in is in what component — Shubham Khatri, Oct 14 '17 at 18:19
React-router v4 doesn't take nested routes so ` ` is incorrect, See this question on how to configure nested routes https://stackoverflow.com/questions/44452858/how-to-write-nested-routes-in-react-router-v4/44453559#44453559 — Shubham Khatri, Oct 14 '17 at 18:24
@ShubhamKhatri May the Lord bless you.You literally saved my life.Please where can i find the best tutorial with projects for reactjs — John Anisere, Oct 14 '17 at 18:37
You may find a good tutorial series on Youtube for React. Probably that should be the starting point — Shubham Khatri, Oct 14 '17 at 18:42
@ShubhamKhatri is there any particular series/channel you recommend? — John Anisere, Oct 14 '17 at 18:51

What is wrong with this code "this.props.params.filter" on react-router

0 Answers0