obj is missing in props - alt

Question

I am new to react. In my react+flux+alt+ES6 application I have three properties for search action. When I try to set default values I got errors.

Action:

 import alt from 'altInstance';
 import AttributeSectionWebAPIUtils from 'utils/AttributeSectionWebAPIUtils';

    class SearchActions {
      searchAttribute(data) {
         this.dispatch(data);
         AttributeSectionWebAPIUtils.search(data)
           .done(function success() {
              // We might not need to do anything it successfully added due to optimistic updates.
        })
        .fail(function failure() {
          // dispatch an event if fails to notify user that it has failed
        });
      }
    }

    export default alt.createActions(SearchActions);

Store:

import SearchActions from 'actions/attributeSection/SearchActions';
import alt from 'altInstance';
   class AttributeSectionStore {
    constructor() {
    this.state = {
      obj: {
        attributeSectionId: '',
        name: '',
        description: ''
      }
    };
    this.bindListeners({
      handleSearch: SearchActions.SEARCHATTRIBUTE
    });
  }

  handleSearch(data) {
      this.emitChange(data);
      // otherwise, it is unchanged.
    }

}

export default alt.createStore(AttributeSectionStore, 'AttributeSectionStore');

View:

import React from 'react';
import { Input } from 'react-bootstrap';
import { ButtonToolbar } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import SearchActions from 'actions/attributeSection/SearchActions';
import AttributeSectionStore from 'stores/attributeSection/SearchStore';
// import styles from 'scss/_common';
/*
 * Code modified from https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/TopicTextInput.react.js
 */
export default class AttributeSectionSearch extends React.Component {
  static getPropsFromStores() {
    return AttributeSectionStore.getState();
  }

  searchAttribute = () => {
    SearchActions.searchAttribute();
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <h1>Attribute Sections</h1>
          <h3>Search Attribute Section</h3>
        </div>
        <div className="col-md-12">
          <div className="pull-right" >
            <Button bsStyle="primary">New</Button>
          </div>
        </div>
        <form className="form-horizontal">
         <div className="row">
          <div className="col-md-6">
            <Input type="text" label="Attribute Section ID" labelClassName="col-xs-3" wrapperClassName="col-xs-6" value={this.props.obj.attributeSectionId}/>
            <Input type="textarea" label="Description" labelClassName="col-xs-3" wrapperClassName="col-xs-6" value={this.props.obj.description}/>
          </div>
          <div className="col-md-6 form-group">
            <Input type="text" label="Name" labelClassName="col-xs-2" wrapperClassName="col-xs-6" value={this.props.obj.name}/>
          </div>
          </div>
          <div className="col-xs-2 col-xs-offset-10">
            <ButtonToolbar>
              <Button bsStyle="primary" onClick={this.searchAttribute}>Search</Button>
              <Button type="reset">Reset</Button>
            </ButtonToolbar>
          </div>
        </form>
      </div>
    );
  }
}

   AttributeSectionSearch.propTypes = {
      attributeSectionId: React.PropTypes.string,
      name: React.PropTypes.string,
      description: React.PropTypes.string
   };

How can I get obj in props?

Answer 1

In alt, getState() gets all the objects you defined under `this'. in your constructor.

In your case, you have defined this.state in your store constructor.
So in your component, you should access this.props.state.obj. In react, this is a quite confusing name.

Best solution is probably to change your code in your constructor from:

this.state = {
  obj: {
    attributeSectionId: '',
    name: '',
    description: ''
  }

to:

this.obj = {
    attributeSectionId: '',
    name: '',
    description: ''
  }

Then you should be able to access this.props.obj