Vfrdtyky

I have a react-table in my react app which renders rows of transactions. I have logic that adds a new, empty row on a button click. I want this row (and only this row) to be editable so that I can use it to create new transactions. I've tried to accomplish this using the Cell column property and the row index from the cellInfo. This works to make only the single column that I'm testing with editable, but the rest of the cells in that column are blank.

import React from 'react';

import axios from 'axios';



import ReactTable from "react-table";

import "react-table/react-table.css";



const API = 'http://127.0.0.1:8000/api/transactions/';



class Transactions extends React.Component {



  constructor() {

    super();



    this.state = {

      data: ,

      isLoading: true,

      error: null

    };

    this.fetchData = this.fetchData.bind(this);

    this.handleAddTransaction = this.handleAddTransaction.bind(this);

    this.renderEditable = this.renderEditable.bind(this);

  }



  handleAddTransaction() {

    let newEmptyRow = {

      date: "",

      payee: "",

      category: "",

      amount: ""

    }



    const insert = (arr, index, newItem) => [ ...arr.slice(0, index), newItem, ...arr.slice(index) ];

    console.log(newEmptyRow);

    this.setState(currentState => ({ data: insert(currentState.data, 0, newEmptyRow) }));

  }



  fetchData(state, instance) {

    this.setState({

      isLoading: true

    });



    axios.get(API).then(response => {

      this.setState({

        data: response.data.results,

        isLoading: false

      });

    });

  }



  renderEditable(cellInfo) {

    if(cellInfo.row._index === 0) {

      return (

        <div

          style={{ backgroundColor: "#009999" }}

          contentEditable

          suppressContentEditableWarning

          onBlur={e => {

            const data = [...this.state.data];

            data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;

            this.setState({ data });

          }}

          dangerouslySetInnerHTML={{

            __html: this.state.data[cellInfo.index][cellInfo.column.id]

          }}

        />

      );

    }

  }



  render() {

    const {

      data,

      isLoading

    } = this.state;



    return (

      <div>

        <button onClick={this.handleAddTransaction} type="button">New +</button>

        <div>

          <ReactTable

            columns = {[

            {

              Header: 'Date',

              accessor: 'date',

              width: 200,

              Cell: this.renderEditable

            },

            {

              Header: 'Payee',

              accessor: 'payee',

              width: 400

            },

            {

              Header: 'Category',

              accessor: 'category',

              width: 200

            },

            {

              Header: 'Amount',

              accessor: 'amount',

              width: 200

            },

            {

              Header: 'Balance',

              accessor: 'balance',

              width: 200

            }]}

            data = {data}

            onFetchData={this.fetchData} // Request new data when things change

            defaultPageSize = {500}

            sortable = {false}

            manual

            style={{

              // This will force the table body to overflow and scroll

              // TODO Finalize height

              height: "800px"

            }}

            loading={isLoading}

            className="-striped -highlight"

          />

        </div>

      </div>)

  };

}



export default Transactions;