Granttastic Granttastic - 2 months ago 47
React JSX Question

React editable table

I have built a React table like so:

const Table = ({data}) => {

return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{data.map((row) => {
return (
<tr>
<td><input type='number' className='form-control' step='1' min="1" value={row[0]}/></td>
<td><input type='text' className='form-control' value={row[1]}/></td>
<td><input type='text' className='form-control' placeholder='6.00' value={row[2]}/></td>
</tr>
);
})}
</tbody>
</table>
);
};

Table.propTypes = {
data: React.PropTypes.array.isRequired
};

export default Table;


In the class I am using this component I am passing data as a parameter (which is initially empty):

materials: [[],[],[],[],[],[],[],[],[],[]] //Initialise with 10 empty rows


<Table data={materials} />


This will build up a table with 10 empty rows. The only problem now is that when I enter data into the table, the data array that I have mapped does not update with the data I have entered.

Table with data entered

I think what I need is some event where I can update the data with a snapshot of what has been entered but I am not sure how to implement this. Any help would be greatly appreciated.

Answer

React doesn't work with two-way data binding, like Angular JS does, for instance. props are read-only, so you would need update them where they belong.

For instance, the parente component, where <Table /> is declared could have materials array in its state and, besides passing materials as props, it could pass a function handler like onCellChange(row, column), so you could bind it with the onChange events in the inputs elements.

Like so,

const Table = ({data, onCellChange}) => {

 return (
    <table className="table table-bordered">
        <thead>
            <tr>
                <th>Qty</th>
                <th>Description</th>
                <th>Price (£)</th>
            </tr>
        </thead>
        <tbody>
            {data.map((row, index) => {
                return (
                    <tr key={index}>
                        <td><input type='number' className='form-control' step='1' min="1" value={row[0]} onChange={() => onCellChange(index, 0)}/></td>
                        <td><input type='text' className='form-control' value={row[1]} onChange={() => onCellChange(index, 1)}/></td>
                        <td><input type='text' className='form-control' placeholder='6.00' value={row[2]}  onChange={() => onCellChange(index, 2)}/></td>
                    </tr>
                );
            })}
        </tbody>
    </table>
  );
};

Table.propTypes = {
    data: React.PropTypes.array.isRequired
};

So, at the parent component, you would declare the component like <Table data={this.state.materials} onCellChange={this.onCellChange} />.

And it would have a method like this:

onCellChange: function(row, column) {
    //update the cell with this.setState() method
}