Pass props for only one item in React

Question

I am building a blog app using React. I have an Index, Feed, and Post components. My Feed comp dynamically generates a list of posts. What I want is to click on one post in the Feed and have the page render only that post. I can't figure out how to capture/pass along the props info for only the post clicked to be rendered.

For brevity here's only the relevant code:

    this.state = {
  view: 'feed',
  blogs: []
}

  changeView(option) {
this.setState({
  view: option
});

}

renderView() { const {view} = this.state;

if (view === 'feed') {
  return <Feed handleClick={() => this.changeView('anypostview') blog={this.state.blogs} 
  view={this.state.view}/>
} else {
  return <Post blogs={this.state.blogs} view={this.state.view}/>
}

}

My click event is registering, but I don't know how to capture the props info for only the post that was clicked and send it to the Post component.

On click "page render only that post" - on the same page? (Or as separate page "router"). — Ezra Siton, Sep 26 '20 at 16:00
I would suggest `routing` for that. Dont make your app complex — Shubham Verma, Sep 26 '20 at 16:01

score 0 · Answer 1 · answered Sep 26 '20 at 16:04

During click the specific post, pass the post to the handleClick and then set the state of the parent component which in this is () => this.changeView('anypostview'), change it to (individualPost?: Post) => this.changeView('anypostview', individualPost) and use that, in that case, you will not need to define or use the state view

score 0 · Answer 2 · answered Sep 26 '20 at 16:17

> blog={this.state.blogs}

this code will return you blank blog array .İ think you can write another function with setState for blog array

>   blogfunc = (blog) => {
>     this.setState({
>       blog: blog,
>     });   };

when you add new things in blog .Call this function and show on your page .

Pass props for only one item in React

2 Answers2