cannot read value of null in reactJs with linkedState

Question

I am trying to create a checkbox component in react and since I already have four and will likely add more down the road, I thought using reactLink would help keep the code less verbose. However, I keep getting an error that Uncaught TypeError: Cannot read property 'false' of null

Here's the component bones, note I'm not yet handling the change - trying to tackle one thing at a time...

var NewCheckInput = React.createClass({

            mixins: [React.addons.LinkedStateMixin],
            render: function(){

                    var filter = this.props.listFilters;
                    var inputData = this;
                    console.log(filter);
                    console.log(this.props.inputValue);

                    var input = (<input
                        type="checkbox"
                        onChange={this.handleChange}
                        name={inputData.props.inputId}
                        checked={this.props.inputValue}
                        id={inputData.props.inputId}
                        checkedLink={this.linkState(filter.for_sale)} />);

                    var label = (
                        <label htmlFor={inputData.props.inputId}>
                            {inputData.props.inputName}
                        </label>);

                    if (this.props.inputLabel){

                    var inputSection = <section>{input} {label}</section>
                    } else {
                        var inputSection  = <section>{input}</section>
                    }

                return inputSection
            }
        });

Here's where the Component get's called by it's parent component - isolated for brevity:

var ControllerForm = React.createClass({

            render: function(){
                var filter = this.props.listFilters;
                return (
                    <form>
                    <NewCheckInput
                        inputType="checkbox"
                        inputId="for-sale"
                        refs="for_sale"
                        inputName="For Sale (3+ Years)"
                        inputLabel ="true"
                        inputValue={filter.for_sale}
                        {...this.props} />

                    </form>
                    )
            }
        });

Here's where I set my states (at the root of the application):

var FilterGrid = React.createClass({
            mixins: [React.addons.LinkedStateMixin],
            getInitialState: function(){
                return {
                    search: '',
                    all: true,
                    for_sale: false,
                    zuchtstuten: false,
                    nachzucht: false
                }
            },

            render: function() {
                return (<section className="wrapper filter-grid">
                    <GridController listFilters={this.state} />
                    <GridList listFilters={this.state} items={horseArr} />
                    </section>)
                }
        });

        React.render(
            <FilterGrid/>,
            document.getElementById('filter-grid')
            );

and here's the console.log of what I believe to be the state object passed along as props inside the NewCheckInput

Object {search: "", all: true, for_sale: false, zuchtstuten: false, nachzucht: false}

Forgive me if there's some general idiotic coding going on here, still working on best practices, correct patterns, etc.

Answer 1

first of all, here's a quote from facebook's react:

If you're new to the framework, note that ReactLink is not needed for most applications and should be used cautiously.

so I would suggest you not to use linkState. (It's up to you)

Here's the code for check component

 'use strict'; var React = require('react'); var CheckBox = React.createClass({ propTypes: { name : React.PropTypes.string, checked : React.PropTypes.bool, description : React.PropTypes.string, checkStatusChanged : React.PropTypes.func }, getDefaultProps: function() { return { name : '', checked : false, description : '', checkStatusChanged : function() {} }; }, getInitialState: function() { return { checked: this.props.checked }; }, _handleCheckChanged: function(event) { this.props.checkStatusChanged(this.props.name, event.target.checked); this.setState({checked: event.target.checked}); }, render: function() { /* jshint ignore:start */ return ( <div> <label> <input type="checkbox" onChange={this._handleCheckChanged} checked={this.state.checked} /> {this.props.description} </label> </div> ); /* jshint ignore:end */ } }); module.exports = CheckBox; 

1. I always declare my propTypes at the top so it's easy to reference
2. always set the default props because if someone use your code, they might forgot to set the prop and cause error somewhere
3. I use _ (underscore) as custom functions to identify with default react js functions

Now here's the code for the parent

 'use strict'; var React = require('react'), CheckBox = require('./components/check-box'), ExampleApp; ExampleApp = React.createClass({ _handleCheckStatusChanged: function(name, value) { console.log(name, value); }, render: function() { return ( /*jshint ignore:start */ <div> <h2>Hello, World</h2> <CheckBox name="cb1" description="check me" checkStatusChanged={this._handleCheckStatusChanged} /> <CheckBox name="cb2" description="check me" checkStatusChanged={this._handleCheckStatusChanged} checked={true} /> </div> /*jshint ignore:end */ ); } }); React.render( /*jshint ignore:start */ <ExampleApp />, /*jshint ignore:end */ document.getElementById('app') ); 

1. I start with "handle..." as to prefix my event handling to identify with other custom event
2. notice how you handle events from child through props (maybe this is what you are confused about?)

Hope these helps.

happy coding!