CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
Jason Tran
Jason Tran

Reputation: 153

routing data to my param page in react.js

I'm currently trying to pass my data when you click on a link on the list component, it will go to the article component where it displays all the data from the backend. My list component is working it is showing the data that I want but it is not passing it to the article component with the rest of the information. it not showing anything. I'm not sure what I did wrong. This is last basic step for me to understand about using react.js and redux coming from a angular background.

routes

<Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={HomePage}></IndexRoute>
        <Route path="about" name="about" components={AboutPage}/>
        <Route path="fashionlist" name="fashionlist" components={FashionList} /> // the list of data
        <Route path="fashionarticle/:id" name="fashionarticle" components={FashionArticle}/> // what the click on the will go to
    </Route>
  </Router>

data from backend 

[{"_id":"58c71df9f7e4e47f1fe17eeb","article":"words words","author":"Jason","date":"1/2/2014","title":"my article","__v":0}, aka bunch more data]

action component 

import axios from "axios";



export function fetchArticle(cb) {
    return function(dispatch) {
        axios.get("http://localhost:3000/api/fashion")
            .then((response) => {
                dispatch({type: "FETCH_ARTICLES_FULFILLED", payload: response.data})
            })
            .catch((err) => {
                dispatch({type: "FETCH_ARTICLES_REJECTED", payload: err})
            })
        if(cb != null){
            cb()
        }
    }
}

the list component

import React from "react"
import { connect } from "react-redux"
import { Link } from 'react-router';

import { fetchArticle } from '../../actions/fashionActions';

@connect((store) => {
    return {

        articles: store.articles.articles,
    };
})
export default class FashionArticle extends React.Component {


    fetchArticle() {
        this.props.dispatch(fetchArticle())
    }

    render() {
        const { articles } = this.props;

        if (!articles.length) {
            return <button onClick={this.fetchArticle.bind(this)}>load Articles</button>
        }

        const mappedArticles = articles.map(article =>
<div>
    <Link to={`fashionArticle/${article._id}`}>{article.title}</Link>
</div>
        )



        return <div>
            <h1>List of Fashion Article</h1>
            <ul>{mappedArticles}</ul>
        </div>
    }
}

article component // not getting data for some reason, not sure what the error is or how to fix it.

import React from "react"
import { connect } from "react-redux"
import { browserHistory } from 'react-router';

export default class FashionArticle extends React.Component {
    handleRedirect(){
        browserHistory.push('/fashionlist');
    }
    render() {
        //article array
        const articles = this.props.route.article;
        const id = this.props.params._id;
        const article = articles.filter(article => {
            if(article._id == _id ) {
                return article;
            }
        })

        return(
            <div>
                <div class="jumbotron">
                </div>
                <h1>{article[0].title}</h1>
                <h3>{article[0].author}</h3>
                <p>{article[0].article}</p>

            </div>

        )
    }
}

Upvotes: 1

Views: 600

Answers (1)

Betty
Betty

Reputation: 9189

I see nothing that will pass the article through to the page.

Try this.props.params.id (no underscore) to get the id of the article you should display.

Then get the right article from the store - this.props.articles[X] (assuming this is an array not a map).

Alternatively I believe you can also pass params on the link itself but i wouldn't recommend it as you may have lots of links ot that page.

<Link params={{ testvalue: "hello" }} />

Upvotes: 1

Related Questions