Question

84

React editable table

rated 0 times [ 89] [ 5] / answers: 1 / hits: 23593 / 8 Years ago, thu, september 29, 2016, 12:00:00

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.

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anais

Add To Favorites

Follow

Total Points: 672

Total Questions: 118

Total Answers: 121

Location: Oman

Member since Fri, Dec 23, 2022

1 Year ago

answered 8 Years ago jarod · Accepted 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

}