wilomgfx
5/26/2017 - 1:52 AM

Example of Parent-child event handling, mainly for active and list items. From https://stackoverflow.com/questions/33570087/react-jsx-remove

Example of Parent-child event handling, mainly for active and list items. From https://stackoverflow.com/questions/33570087/react-jsx-remove-css-classes-on-sibling-components-when-the-current-componen

parent-child-click-handler.jsx
content_copyfile_download
// ES6, React 0.14
var MenuItem = ({onClick, text, active}) => (
    <button onClick={onClick} style={active? {color: 'red'} : null}>{text}</button>
);

// example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeIndex: 0};
    }
    handleItemClick(index) {
        this.setState({activeIndex: index});
    }
    render() {
        var activeIndex = this.state.activeIndex;
        return <div>
            {
                this.props.buttons.map(
                    (btn, i) => (
                        <MenuItem
                            active={activeIndex === i}
                            key={i}
                            onClick={this.handleItemClick.bind(this, i)}
                            text={btn} />
                    )
                )
            }
        </div>
    }
}