Q: How should I communicate to a parent component what array item I want to interact with? I'm looking for some guidance on how child components should communicate back to parent components about what data item from an array a user has selected to interact with.
Example scenario: You have a list of users, presented as a table, and we want to do something with the user info when the user click a table row. There is a component containing the table, and each row is a component. I immediately see two options for getting the user that was selected:


*

*The child component holds the full user record for each row, then passes that back up to the parent component in the on-click handler

*In the on-click handler in the parent, using the event information, retrieve a key that lets you look up the record from the source data; the key might be an id in a data attribute, for example


Maybe it's that I've used jQuery for so long, but my gut is to go with #2. #1 feels wrong, but I don't know React well enough to say why. Maybe it's because it seems that the child component shouldn't have to have knowledge of the full record if it doesn't need the additional information for display. Maybe it's the idea of the child having to pass the full record back to the parent when the parent already has that record (so maybe I should just pass the key back up)?
To prevent this from just being an opinion question, what I'm looking for is guidance (link to documentation, specific rationales) for how to generally handle the situation I'm describing.
An obviously contrived example of #1 (fiddle: https://jsfiddle.net/MrBishop/fh1zqeu4/1/):
function UserRow(props) {
    var { user } = props;

    return (
        <tr onClick={props.onClick.bind(this, props.user)} data-userid={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
        </tr>
    );
}

const users = [
   { id: 1, name: 'User A', email: 'me@here.com'},
   { id: 2, name: 'User B', email: 'me2@here.com'}
];

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler(user) {
        alert(JSON.stringify(user));
    }

    render() {
        var rows =
            users.map(function(el) {
                return (
                    <UserRow key={el.id} onClick={this.clickHandler} user={el} />);
            }, this);

        return (<table><tbody>{rows}</tbody></table>);
    }
}

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);



A: Just pass whatever you want as a param of your click function, so just a slight modification in onClick function, now you are actually passing that row's user to your clickHandler() function.
clickHandler(user) {
    alert(JSON.stringify(user)); // now user is whatever "el" you passed in
}

render() {
    var rows =
        users.map(function(el) {
            return (
                <UserRow key={el.id} onClick={() => this.clickHandler(el)} user={el} />);
        }, this);

    return (<table><tbody>{rows}</tbody></table>);
}

