title: Passing react-table row data to react-modal
body: <p>Being new to React, I'm having a hard time to pass data from react-table to an "edit" modal and can't seem to find a solution for a similar problem. Data are fetched from the database by an Axios API call and rendered in a react-table. I need to pass data of a rendered row to a modal, in order to then make a put request and update the data to the server. The edit button is in the modal class and then rendered on the table.</p>
  
  <p>Below you can see the modal&amp;form class, which is then called in the table class.</p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label } from 'reactstrap';
  import Axios from 'axios';
  
  
  class CompanyModal extends Component {
      constructor(props) {
          super(props);
      this.state = {
          modal: props.initialModalState,
          id: '',
          title: '',
          address: '',
          phoneNumber : '',
          email: ''
      };
      this.toggle = this.toggle.bind(this);
  }
  
  componentDidMount() {
      if (this.props.company) {
          const { id, title, address, phoneNumber, email } = this.props.company
          this.setState({ id,title, address, phoneNumber, email});
      }
  }
  onChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value })
  }
  
  
  submitNew = e =&gt; {
      e.preventDefault()
      Axios.post('localhost:44394/api/companies/Create', this.state)
      .then(res =&gt; {
      console.log(res)})
      .catch(error =&gt; {
          console.log(error)
      })
  }
  
  submitEdit = e =&gt;{
      e.preventDefault()
      Axios.put(`localhost:44394/api/companies/update/${this.state.id}`, this.state)
      .then(res =&gt; {
          console.log(res)
      })
      .catch(error =&gt; {
          console.log(error)
      })
  }
      toggle () {
          this.setState({
              modal: !this.state.modal
          });
      }
  
      render() {
          const isNew = this.props.isNew;
  
          let title = 'Edit Company';
          let button = '';
          if (isNew) {
              title = 'Add Company';
  
              button = &lt;Button
                  color="success"
                  onClick={this.toggle}
                  style={{ minWidth: "200px" }}&gt;Add Company&lt;/Button&gt;;
          } else {
              button = &lt;Button
                  className="btn-icon btn-round"
                  size="sm"
                  color="warning"
                  onClick={this.toggle}&gt;&lt;i className="fa fa-edit" /&gt;
                  &lt;/Button&gt;;
          }
  
          return &lt;Fragment&gt;
              {button}
              &lt;Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}&gt;
                  &lt;ModalHeader toggle={this.toggle}&gt;{title}&lt;/ModalHeader&gt;
                  &lt;ModalBody&gt;
                      &lt;Form onSubmit={this.props.company ? this.submitEdit : this.submitNew}&gt;
                          &lt;FormGroup&gt;
                              &lt;Label for="name"&gt;Name:&lt;/Label&gt;
                              &lt;Input type="text" name="title" onChange={this.onChange} value= 
                                   {this.state.Title === '' ? '' : this.state.Title} /&gt;
                          &lt;/FormGroup&gt;
                          &lt;FormGroup&gt;
                              &lt;Label for="address"&gt;Address:&lt;/Label&gt;
                              &lt;Input type="text" name="address" onChange={this.onChange} value= 
                                   {this.state.address === null ? '' : this.state.company} /&gt;
                          &lt;/FormGroup&gt;
                          &lt;FormGroup&gt;
                              &lt;Label for="phoneNumber"&gt;Phone Number:&lt;/Label&gt;
                              &lt;Input type="number" name="phoneNumber" onChange={this.onChange} value= 
                                   {this.state.phoneNumber === null ? '' : this.state.phoneNumber} /&gt;
                          &lt;/FormGroup&gt;
                          &lt;FormGroup&gt;
                              &lt;Label for="email"&gt;Email:&lt;/Label&gt;
                              &lt;Input type="email" name="email" onChange={this.onChange} value= 
                                   {this.state.email === null ? '' : this.state.email} /&gt;
                          &lt;/FormGroup&gt;
                          &lt;Button type="submit"&gt;Submit&lt;/Button&gt;
                      &lt;/Form&gt;
                  &lt;/ModalBody&gt;
              &lt;/Modal&gt;
          &lt;/Fragment&gt;;
      }
      }
  export default CompanyModal;
  </code></pre>
  
  <p>Table code</p>
  
  <pre><code>
  import React, { Component } from "react";
  import ReactTable from "react-table";
  import CompanyModal from "../Forms/CompanyModal";
  import axios from "axios";
  import {
    Card,
    CardBody,
    CardHeader,
    CardTitle,
    Row,
    Col,
    Button,
    ButtonToolBar
  } from "reactstrap";
  
   var data
  
  class CompanyTable extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        posts:[]
      };
    }
  
  
  componentDidMount(){
    axios.get(`https://localhost:44394/api/companies`)
    .then(res =&gt; {
      const posts = res.data;
      this.setState({posts});
    })
  }
  
    render() {
      const posts = this.props.posts;
      const columns =[
        {
          Header: "Id",
          accessor: "id",
          show: false
        },
        {
          Header: "Name",
          accessor: "title"
        },
        {
          Header: "Address",
          accessor: "adress"
        },
        {
          Header: "Phone Number",
          accessor: "phoneNumber"
        },
        {
          Header: "Actions",
          Cell: props =&gt;{
            return ( 
              &lt;div className="actions-right"&gt;
  
  
  
  
              &lt;CompanyModal/&gt;
  
  
  
  
  
              &lt;div/&gt;
            )
          },
          sortable: false,
          filterable: false
         }
      ]
      return (
        &lt;&gt;      
            &lt;Row&gt;
              &lt;Col xs={12} md={12}&gt;
                &lt;Card&gt;
                  &lt;CardHeader&gt;
                    &lt;CardTitle tag="h4"&gt;Companies&lt;/CardTitle&gt;
                    &lt;CompanyModal isNew/&gt;
                  &lt;/CardHeader&gt;
                  &lt;CardBody&gt;
                    &lt;ReactTable
                      data={this.state.posts}
                      filterable
                      columns = {columns}
                      defaultPageSize={10}
                      showPaginationTop
                      showPaginationBottom={false}
                      className="-striped -highlight"
                      /&gt;                 
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;          
        &lt;/&gt;
      );
    }
  }
  
  export default CompanyTable;
  </code></pre>