Cisco Java Cisco Java - 1 year ago 121
React JSX Question

React : How to manage state for multiple input types

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
};

gca gca
Answer Source
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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download