0

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?

user1038662
  • 69
  • 8

2 Answers2

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.

const314
  • 1,620
  • 11
  • 16
0

We always use PropTypes to denote what we expect and avoid errors. Also PropTypes are cool as you do not need to check the whole tree of data once you revisit code after a while.

React PropTypes

gor181
  • 1,988
  • 1
  • 14
  • 12