React router redirect based on api response

Question

I'm using tmdb api multi search, I have a get request that returns back an array of items which have an object key and value. Some return 'media_type: tv', some return 'media_type: movie' I have two different routes set up for each of these.

Heres my App structure

<BrowserRouter>
    <div className='App'>
      <Switch>
        <Route path='/' exact component={Home} />
        {/* <Route exact path='/details/:type/:id' component={ItemDetails} /> */}
        <Route exact path='/details/movie/:id' component={MovieDetails} />
        <Route exact path='/details/tv/:id' component={TvDetails} />
      </Switch>
    </div>
  </BrowserRouter>

Get Request

` performSearch = () => { // Requesting data from API
    let now = (this.now = Date.now());
    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
        .then((res) => {
            console.log(res.data.results);
            // Accepting response if this request was the last request made
            if (now === this.now) {
               this.setState({ searchResults: res.data.results});
            }
        });
}`

Functional Component that renders search result items

    const Suggestions = (props) => {
  const options = props.searchResults.map(r => (
    <li
      key={r.id} >
      <Link key={r.id} to={`/details/${r.id}`}>
        <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
        <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
        <a href='#t' className='search-results-name'>{r.name}</a>
        <a href='#t' className='search-results-title'>{r.title}</a>
      </Link>
    </li>
  ))
  return <ul className='search-results'>{options}</ul>
}

I'm thinking something like if(props.media_type === tv){<Redirect component={TvDetails}/> else {<Redirect component={MovieDetails}, I'm new to react-router so I'm not sure on how to do this

I have tried <Link key={r.id} to={/details/${props.searchResults.media_type.value}/${r.id}}>

but it says value is undefined though I can see it in my console.log

edit: <Link key={r.id} to={/details/${r.media_type.value}/${r.id}}>

Takes me to /details/undefined/1234 , So I guess the value is still undefined?

I just got it working, though I used <Link key={r.id} to={/details/${r.media_type}/${r.id}}> Thanks though — invrt
– invrt, Commented Dec 19, 2018 at 4:21

Shubham Khatri · Accepted Answer · 2018-12-19 04:22:52Z

1

media_type itself returns the string value in your case and an object with attribute value. So you just need to access media_type and not media_type.value

<Link key={r.id} to={`/details/${r.media_type}/${r.id}}`>

answered Dec 19, 2018 at 4:22

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muljayan · Accepted Answer · 2018-12-19 04:37:27Z

1

Change
<Link key={r.id} to={/details/${r.media_type.value}/${r.id}}>
to
<Link key={r.id} to={/details/${r.media_type}/${r.id}}>.
You don't need to add .value to get the value from the object

answered Dec 19, 2018 at 4:37

Muljayan

3,92611 gold badges36 silver badges58 bronze badges

Collectives™ on Stack Overflow

React router redirect based on api response

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related