How to setState to one particular component instance in RefluxJS?

Question

I'm currently doing one small project in React + Flux (RefluxJS) and I faced wit one issue I can't solve. I would be very gratefully if someone of you can give me a hand.

Here you have the link to GitHub with the whole project in order to facilitate your help, it's a simplest version just to reproduce the problem I faced.

My doubt is, how can I use one component in the same view with different content. Let me explain:

I have on component in, "components/threads.jsx" which in summary render this peace of code getting the data from the store ("stores/thread-store.jsx") throug a fake API ("utils/api.jsx"):

renderThreads: function() { 
    return this.state.thread_content.map(function(thread, i) {  
        return (
            <div key={thread.id}>
                <div className="row">
                    <div className="col-md-10">
                        <a data-toggle="collapse" href={'#thread-' + thread.id} className="faq-question">{thread.name}</a>: <small>{thread.content}</small>
                    </div>              

                </div>
                <div className="row">
                    <div className="col-lg-12">
                        <div id={'thread-' + thread.id} className="panel-collapse collapse ">
                            <Posts id={thread.id} />
                        </div>
                    </div>
                </div>
            </div>
        );

    });
},

As yo can see, I have another component nested called "Posts" in "components/thread-posts.jsx" which is rendered for each thread is mapped. In the "Posts" component I have this peace of code:

module.exports = React.createClass({
mixins: [
    Reflux.listenTo(PostsStore, 'onChange'),
],
getInitialState: function() {
    return {
        posts: []
    }
},
componentDidMount: function() {
    Actions.getPosts(this.props.id);
},
render: function() {    
    return (
        <div>
            {this.renderPosts()}
        </div>
    );
},
renderPosts: function() {
    if(this.state.posts.comments != undefined){
        return this.state.posts.comments.map(function(post, i) {
            return(                             
                <div key={i} className="faq-answer">
                    <p>             
                    {post.content}
                    </p>
                </div>
            );
        });
    }
},
onChange: function(event, posts) {
    this.setState({
        posts: posts,
    });
}

Here comes the problem. When finish the render, all the threads have the same posts, in particular the lasts ones were set. I think is related with the states, if they change it will be change in all the components were rendered.

So, my question is, how can I deal with it in order to have the posts according to its thread but using the same component? If it's not posible, which is the best solution to do that?

I hope explained myself as well as enough to understand me.

I will be very gratefully if you can give me a hand in this issue.

Thanks in advance.

Answer 1

Yes if you share the Store with your View then latest one will be overwrite your previous Component's data

you have to create a separate variable which can hold the data of each API Call and when call API you have to pass the Key like

let's take one example

I have one Component it's called MainComponent I want to use same Component on same page twice but the data should be different for both component I have one Store for MainComponent called MainStore In MainStore I have one Method called getData like

getData:function(key)
{
 //API Call
}

now I am calling this method from my MainComponent from componentDidMount event like

componentDidMount:function()
{
  //if you used Action then you have to called like 
   MainComponentAction.getData(this.props.Key);
  // if you directly called 
  MainComponentStore.getData(this.props.Key);
}

here this.props.Key you have to pass from the parent component which should 1 or 2

now come to store we have passed the Key so now we have to check condition while we received a data from API

suppose I have taken one variable in which I am storing the data which is return by API like

now you have to create two methods for store the data based on key var _data,_data1

function loaddata(APIdata,key)
    {
     if(key===1)
       {
         _data=APIdata
        }
    else
     {
       _data1=APIdata
     }

    }

and in your store you to methods for getting the data like

getData:function()
{
return _data;
},
getData1:function()
{
return _data1;
}

now your getintialState of MainComponent Should be

getintialState:function()
{
return{
   Data:JSON.Parse(MainComponentStore.getData()),
   Data1:JSON.Parse(MainComponentStore.getData1()),
  }
}

and your MainComponent render function should be

 render:function(){
    var LatestData;
    if(this.props.Key===1)
    {
    LatestData=this.state.Data
    }
    else if(this.props.Key===2)
    {
    LatestData=this.state.Data1
    }
return(
  <div>
   {LatestData}
  </div>
)
    }