CODEWITHSUNDEEP
javascriptnode.jsreactjsfrontend
JSMITH
JSMITH

Reputation: 63

(react) Dynamic URLs, can't render the data I want

I'm almost there but still can't manage to send me the data.

I have my data component that render a list of blog posts and my router targeting the index and title

//Blockblock.js
const blogData = this.state.blogData.map((value) =>
            value.map((val, idx) =>                                                       
                <BlogBlock 
                    link={val.title.toString().toLowerCase().split(" ").join("-")} 
                    title={val.title}
                    subtitle={val.subtitle}
                    thumb={val.thumb}
                    idx={idx}
                />            
            )
        )  

//Blockblock.js
const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>            
            <Link to={`blog/${props.idx}/${props.link}`}>
                <Img loader={<span className="loading-img">loading....</span>} src={`http://brittdepetter.com/images/${props.thumb}`} alt={props.title} />
                <h3>{props.title}<span><br />{props.subtitle}</span></h3>
            </Link>  
        </div>                        
    )   
}
//app.js
<Route path='/blog/:blogId/:blogTitle' component={BlogPost} />

and finally I have my blockpost component, i'm matching the URLs but how do I pass the props to render the data like the images, etc?

BlockPost.js
const BlogPost =({match, location}) => {                   
    const { params:{ blogId, blogTitle } } = match;
    return (                          
        <div>                                        
            <h2>{ props.title }</h2> 
            <div className="textBox boxImg">
                <div className="story-img-box">
                    { props.imgsrc }
                </div>            
                <div>
                    {console.log(props)}
                    {props.body}
                </div>
            </div>
        </div>            
    )   
}
```

Upvotes: 0

Views: 150

Answers (2)

Kavita
Kavita

Reputation: 680

I think it depends on where you are getting your data (img, etc) from

You could use a React Component, and take advantage of of the lifecycle methods, specifically componentDidMount(). Take a look at link I provided, I think it will be helpful.

https://reactjs.org/docs/state-and-lifecycle.html

Upvotes: 0

zhuber
zhuber

Reputation: 5524

If you are trying to pass additional props from BlogBlock to BlogPost, that is not possible without some kind of state management like Redux where both components would be able to use shared state.

I'd suggest to refetch your blog based on blogId inside BlogPost component, because you'll need to handle direct access (if user directly navigates to /blog/:blogId/:blogTitle by entering it in url, and not from BlogBlock) anyway. Another option is to refetch only if it was direct access, otherwise use data from shared state (based on selection from BlogBlock which would be stored in that state).

Upvotes: 1

Related Questions