React : How to manage state for multiple input types

Question

Working on a POC that displays tennis player details in a page.There can be 'n' number of players displayed. The user can update information of all the players at the same time.

Written 3 components PlayersPage, PlayerTable and PlayerRow. I am little confused on how to update the state(playerData) in PlayersPage when the player information is updated in PlayerRow. Any pointer/link will be helpful.

Below is the code:

class PlayersPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            playerData: [
                {
                    "dataKey": "300",
                    "playerFirstName": "Roger",
                    "playerLastName": "Federer",
                    "playerRanking": "1"
                },
                {
                    "dataKey": "301",
                    "playerFirstName": "Rafael",
                    "playerLastName": "Nadal"
                    "playerRanking": "2"                    
                }           
            ]
        };
    }

    render() {
        return (
            <div className="container">
                <PlayerTable tableData={this.state.playerData} />;
            </div>
        );
    }
}



class PlayerTable extends React.Component {
    render() {
        const rows = [];
        this.props.tableData.forEach((rowData) => {
            rows.push(<PlayerRow key={rowData.dataKey} rowData={rowData} />);
        });
        return (
            <div className="table-responsive">
                <table className="table table-condensed">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Ranking</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        );
    }
}

PlayerTable.propTypes = {
    tableData: PropTypes.array.isRequired
};



class PlayerRow extends React.Component {
    render() {
        return (
            <tr>
                <td><input type="text" value={this.props.rowData.playerFirstName} /></td>
                <td><input type="text" value={this.props.rowData.playerLastName} /></td>
                <td><input type="text" value={this.props.rowData.playerRanking} /></td>
            </tr>
        );
    }
}

PlayerRow.propTypes = {
    rowData: PropTypes.object.isRequired
};

Please add code for Redux/Flux/Mobx of the app, actions and reducers if incase you are using any of them. — Anvesh Checka, Oct 02 '17 at 18:25
I have not written any code for Redux. Can't it be done without redux? — Cisco Java, Oct 02 '17 at 18:27
Sure, it can be done with a tiny hand-written state manager as well. — Anvesh Checka, Oct 02 '17 at 18:27
@gca I guess he only wants to propagate state changes to the parent component, no need for redux. — XCS, Oct 02 '17 at 18:28
just started learning React... Could you point me to the correct/ideal way to update the state in parent as per user update of rows? — Cisco Java, Oct 02 '17 at 18:30
Possible duplicate of [How to pass state back to parent in React?](https://stackoverflow.com/questions/40722382/how-to-pass-state-back-to-parent-in-react) — XCS, Oct 02 '17 at 18:31

score 0 · Answer 1 · answered Oct 02 '17 at 18:31

Component communication can be achieved by passing data via props.

Check out this link, specifically section 3.

How do you send data from a child to its parent?

The simplest way is for the parent to pass a function to the child. The child can use that function to communicate with its parent.

The parent would pass a function to the child as a prop, like this:

<MyChild myFunc={this.handleChildFunc.bind(this)} />

And the child would call that function like so:

this.props.myFunc();

And don't forget that the child will need this function declared in its propTypes:

MyChild.propTypes = {
  myFunc: React.PropTypes.func,
};

score 0 · Accepted Answer · answered Oct 02 '17 at 18:49

class PlayersPage extends React.Component {
    constructor(props) {
        super(props);
        this.changeRecord = this.changeRecord.bind(this);
        this.state = {
            playerData: [
                {
                    "dataKey": "300",
                    "playerFirstName": "Roger",
                    "playerLastName": "Federer",
                    "playerRanking": "1"
                },
                {
                    "dataKey": "301",
                    "playerFirstName": "Rafael",
                    "playerLastName": "Nadal",
                    "playerRanking": "2"                    
                }           
            ]
        };
    }

    changeRecord(record, event) {
      console.log(event.currentTarget.value);
      console.log(record);
      this.setState({
        // Write your logic to update the playerDate value accordingly
      });
    }

    render() {
        return (
            <div className="container">
                <PlayerTable recordChangeHandler={this.changeRecord} tableData={this.state.playerData} />;
            </div>
        );
    }
}



class PlayerTable extends React.Component {
    render() {
        const rows = [];
        this.props.tableData.forEach((rowData) => {
            rows.push(<PlayerRow recordChangeHandler={this.props.recordChangeHandler} key={rowData.dataKey} rowData={rowData} />);
        });
        return (
            <div className="table-responsive">
                <table className="table table-condensed">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Ranking</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        );
    }
}

class PlayerRow extends React.Component {
    render() {
        return (
            <tr>
                <td><input type="text" onChange={this.props.recordChangeHandler.bind(this, this.props.rowData)} defaultValue={this.props.rowData.playerFirstName} /></td>
                <td><input type="text" onChange={this.props.recordChangeHandler} defaultValue={this.props.rowData.playerLastName} /></td>
                <td><input type="text" onChange={this.props.recordChangeHandler} defaultValue={this.props.rowData.playerRanking} /></td>
            </tr>
        );
    }
}

ReactDOM.render(
  <PlayersPage />,
  document.getElementById('container')
);

Checkout the JSFiddle example you can probably emulate in your POC app. https://jsfiddle.net/69z2wepo/86736/

React : How to manage state for multiple input types

2 Answers2