Reactjs: Uncaught TypeError: undefined is not a function

Question

I am a newbie in the Reactjs, I am trying to perform CRUD operation. But I am having issues when performing Delete event. This is How my screen looks: ![enter image description here][1]

And my code looks like this:

    var DALHandler=React.createClass({
            getInitialState:function(){
              return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) { // this is Json Function

                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },componentWillMount: function() {
                this.loadOrganizationFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList data= {this.state.data}  />
                    <Organization DeleteOrganization= {this.DeleteOrganizationFromServer} />


                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var organizations = parsed_results.map(function(organization){
                return <Organization  id={organization.id} name={organization.name} description={organization.description}> </Organization>
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    //var converter = new Showdown.converter();

    var Organization = React.createClass({
        handleDeleteClick: function (e) {
                //alert(this.props.id);
                 var currentId=this.props.id;
                 this.props.DeleteOrganization(); // ERROR CAUSES HERE:


            },

    render: function() {

        return (
            <div className="row">
            <div className="small-2 large-2 columns">{this.props.id} </div>
            <div className="small-4 large-4 columns">{this.props.name} </div>
            <div className="small-4 large-4 columns">{this.props.description}</div>
            <div className="small-2 large-2 columns"> 

            <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />  

            </div>


            </div>
            );
    }
});

I know I am doing some stupid mistake but I don't find help to solve this. Please help me to sort it out.

Thank you in advance.

Answer 1

I have managed to the solve problem myslef but this fiddle helped me greatly: http://jsfiddle.net/ammit/wBYHY/5/

So mainly I added one more function in OrganizationList that calls DeleteOrganizationFromServer function, so now my code looks like this:

var OrganizationHandler=React.createClass({
            getInitialState:function(){
                return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) {

                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.loadOrganizationFromServer();
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url',
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },
            componentWillMount: function() {
                this.loadOrganizationFromServer();

            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />

                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        internal_DeleteOrganization: function(id) {
            this.props.external_DeleteOrganization(id);
        },
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var that = this; // Not equally that to this was also causing error, 
            var organizations = parsed_results.map(function(organization){
                return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    var Organization = React.createClass({
        handleDeleteClick: function () {
                this.props.onDeleteOrganization(this.props.id);
            },

    });

Answer 2

You create your Organization elements like this:

<Organization  id={organization.id} 
               name={organization.name} 
               description={organization.description}></Organization>

So inside Organization you will have three props: id, name, and description. You try to call this.props.DeleteOrganization() from inside Organization, which is undefined because it's not one of the three props you're passing to it.

To make it work with OrganizationList, you need to pass the delete function down to it:

<OrganizationList data={this.state.data}  onDelete={this.DeleteOrganizationFromServer} />

And inside OrganizationList's render function, you can pass it down again.

<Organization  id={organization.id} 
               name={organization.name} 
               description={organization.description}
               onDelete={this.props.onDelete.bind(null, organization.id}></Organization>

And inside Organization:

handleDeleteClick: function(){
    this.props.onDelete()
}