title: How do I access data of one jsx file in the other jsx file in React?
body: <p>the component shown is an editable table. i need to send data of this component and the parent component to a seperate component on a submit button click in the parent form. Im new to this. Can someone help me? i have to access the datasource on the button click. is there some kind of expression to call the data from child directly in the parent?
       i have to access the datasource on the button click. is there some kind of expression to call the data from child directly in the parent?</p>
  
  <pre><code>export default class EditableTable extends React.Component {
    constructor(props) {
      super(props);
      this.columns = [
        {
          title: 'Backup Of',
          dataIndex: 'backupOf',
          render: (select, record) =&gt;
            this.state.dataSource.length &gt;= 1 ? (
                        &lt;Select name='backupOf' defaultValue='Select'&gt;
                          &lt;option value="1"&gt;Files Or Folder&lt;/option&gt;
                          &lt;option value="2"&gt;SQL DB&lt;/option&gt;
                         &lt;/Select&gt;
            ) : null,
        },
        {
          title: 'Server IP',
          dataIndex: 'serverIp',
          editable: true,
        },
        {
          title: 'Server Type',
          dataIndex: 'serverType',
          render: (select, record) =&gt;
          this.state.dataSource.length &gt;= 1 ? (
                      &lt;Select defaultValue='Select' name='servertype' &gt;
                        &lt;option value="1"&gt; Production&lt;/option&gt;
                        &lt;option value="2"&gt; Dev&lt;/option&gt;
                      &lt;/Select&gt;
          ) : null,
        },
        {
          title: 'Frequency',
          dataIndex: 'frequency',
          render: (select, record) =&gt;
          this.state.dataSource.length &gt;= 1 ? (
                      &lt;Select defaultValue='Select' name='freq'&gt;
                        &lt;option value="1"&gt; One time&lt;/option&gt;
                        &lt;option value="2"&gt; Daily&lt;/option&gt;
                        &lt;/Select&gt;
          ) : null,
        },
        {
          title: 'Backup Drive',
          dataIndex: 'backupDrive',
          render: (select, record) =&gt;
          this.state.dataSource.length &gt;= 1 ? (
                      &lt;Select defaultValue='Select' name='backupdrive'&gt;
                        &lt;option value="1"&gt; LTO2&lt;/option&gt;
                        &lt;option value="2"&gt; LTO3&lt;/option&gt;
                      &lt;/Select&gt;
          ) : null,
        },
  
        {
          title: 'operation',
          dataIndex: 'operation',
          render: (text, record) =&gt;
            this.state.dataSource.length &gt;= 1 ? (
              &lt;Popconfirm title="Sure to delete?" onConfirm={() =&gt; this.handleDelete(record.key)}&gt;
                &lt;a href="javascript:;"&gt;Delete&lt;/a&gt;
              &lt;/Popconfirm&gt;
            ) : null,
        },
      ];
  
      this.state = {
        dataSource: [
          {
            key: '0',
  
          }
  
        ],
        count: 1,
      };
    }
  
    handleDelete = key =&gt; {
      const dataSource = [...this.state.dataSource];
      this.setState({ dataSource: dataSource.filter(item =&gt; item.key !== key) });
    };
  
    handleAdd = () =&gt; {
      const { count, dataSource } = this.state;
      console.log('datasource................',this.state)
      const newData = {
        key: count,
  
      };
      this.setState({
        dataSource: [...dataSource, newData],
        count: count + 1,
      });
    };
  
    handleSave = row =&gt; {
      const newData = [...this.state.dataSource];
      const index = newData.findIndex(item =&gt; row.key === item.key);
      const item = newData[index];
      newData.splice(index, 1, {
        ...item,
        ...row,
      });
      this.setState({ dataSource: newData });
    };
  
    render() {
      const { dataSource } = this.state;
      const components = {
        body: {
          row: EditableFormRow,
          cell: EditableCell,
        },
      };
      const columns = this.columns.map(col =&gt; {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: record =&gt; ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave: this.handleSave,
          }),
        };
      });
      return (
        &lt;div&gt;
          &lt;Table
            components={components}
            rowClassName={() =&gt; 'editable-row'}
            bordered
            dataSource={dataSource}
            columns={columns}
            style={{overflowX:"scroll"}}
          /&gt;
          &lt;Button onClick={this.handleAdd} style={{marginTop: 16 }}&gt;
            Add a row
          &lt;/Button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>