Should component in React be aware of the structure of the data object get from the Store

Question

Hi I am quite new to React and Flux, they work charmingly and really ease my work, but now I have this question bothered me for quite a while, say I have a list of file names that can turned grey in the state of unavailable.

I have done this by read the 'available' attribute inside child component:

{fileA : { available : true }, fileB : { available : false } } //data get from the Store

But Im quite uncomfortable with this as it makes my component assumes the data type in return ( that is should have a value which is a object type which shoud have an 'available' field)

Is there any other ways to achieve this in a more decoupled way or am I just making needlessly worry?

Answer 1

In my opinion, expecting some type and property is not a big problem if you are processing the data absence correctly. As for decoupling, you can create a component for displaying single file name that awaits two props: fileName and avalable, and let the parent component pass these props to its children, for example:

var FileList = React.createClass({
    render: function(){
    return (
        this.state.files.map(function(file){
                return <FileListItem fileName={file.name} available={file.available}/>
            }, this);
        );
    }
});

In this case child component will not know any detail about your objects.