CODEWITHSUNDEEP
reactjs
Elliot Reeve
Elliot Reeve

Reputation: 941

ReactJS - Call function from outside of class

I am using antd as my UI framework. I am trying to call a function declared inside the Class from outside the class, how do I do it?

const columns = [
{
        title: 'Action',
        dataIndex: 'action',
        key: 'action',
        render: (text, record, index) => {
            if (record.status === 'error') {
                return <a className='error-text' href="#">{text} &raquo;</a>
            } else if (record.status === 'draft') {
                return <a href="#" onClick={(e) => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete" /> Delete</a>
            } else if (record.status === 'progress') {
                return 'N/A'
            } else {
                return <a href="#">{text} &raquo;</a>
            }
        }
]

class OnBoard extends Component {
    constructor(props) {
            super(props);
            this.state = {
                modalVisible: false
            }
    }

    showModal = (id) => {
        console.log('i am clicking id: '+id);
    }

    render() {
        return (
            <Base page={this.props.location.pathname} title="TOUR LIST">
                <div id="dashboard">
                    <Table
                        style={{clear: 'both'}}
                        dataSource={this.state.data}
                        columns={columns}
                        loading={this.state.loading}
                        pagination={this.state.pagination}
                        onChange={this.handleTableChange}
                    />
                    <Modal
                        title="Delete Tour"
                        visible={this.state.modalVisible}
                        onOk={this.handleOk}
                        okText="Confirm"
                        cancelText="Cancel"
                        onCancel={this.handleCancel}
                        >
                        <p>Please confirm you would like to delete the Tour: blablah.xls</p>
                    </Modal>
                </div>
            </Base>
        );
    }

Error: 'showModal' is not defined no-undef

I tried changing it to:

showModal(id){
    console.log('i am clicking id: '+id);
}

But I still got the same error.

I have added the render function in as well to show wider context.

Upvotes: 1

Views: 7082

Answers (4)

Lawrence Chang
Lawrence Chang

Reputation: 449

What you can do is set a ref to the component you wish to have access to then use that reference to call the function. A rough example:

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.setRef = element => { this.element = element; };
  }

  render() {
    return (
      <div>
        <Child ref={this.setRef} />
        <p>{this.element.getText()}</p>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: 'hello world',
    };

    this.getText = this.getText.bind(this);
  }

  getText() {
    return this.state.text;
  }

  render() {
    return (
      <div>Child</div>
    );
  }
}

Upvotes: 0

Elliot Reeve
Elliot Reeve

Reputation: 941

I solved this by simply moving the const to within the Class and refering to it as this.columns []. I was then able to do the rest as normal.

Thanks for the help!

Upvotes: 2

Chase DeAnda
Chase DeAnda

Reputation: 16441

You should create a function that accepts the showModal function as a param:

function getColumns (showModal) {
    return [
        {
            title: 'Action',
            dataIndex: 'action',
            key: 'action',
            render: (text, record, index) => {
                record.status === 'error' && return <a className='error-text' href="#">{text} &raquo;</a>;
                record.status === 'draft' && return <a href="#" onClick={ e => { e.stopPropagation(); showModal(record.id); } }><Icon type="delete"/>Delete</a>;
                record.status === 'progress' && return 'N/A';
                return <a href="#">{text} &raquo;</a>;
            }
        }
    ]
}

In render():

<Table
    style={{clear: 'both'}}
    dataSource={this.state.data}
    columns={getColumns(this.showModal)}
    loading={this.state.loading}
    pagination={this.state.pagination}
    onChange={this.handleTableChange}
/>

Upvotes: 1

Luis Nolazco
Luis Nolazco

Reputation: 1322

Declare the function as static.

class ComponentA extends React.Component {
  static getSomething() {
    return 'this is returned from getSomething function';
  }
  render() {
    return <div>Component A</div>;
  }
}

class ComponentB extends React.Component {
  render() {
    return (
      <div>
        <h3>Component B</h3>
        <h4>function ComponentA.getSomething:</h4>
        <p>{ComponentA.getSomething()}</p>
      </div>
    );
  }
}

Look at this example:

https://codesandbox.io/s/zk3m3n4zzx

Upvotes: 0

Related Questions