How to choose a group of children from a parent?

Question

Say I have a Parent component that displays a set of Child components. When hovering over one of these Child components, I want to highlight (bg color) the Child components that belong to the same group.

See the code below, each Child has a group property:

https://jsfiddle.net/69z2wepo/53442/

 const Parent = React.createClass({ render() { const rows = []; let group = 1; for (let i = 1; i <= 12; i++) { rows.push(<Child key={i} id={i} group={group} />); if (i % 3 === 0) { group++; } } return ( <ul> {rows} </ul> ); } }); const Child = React.createClass({ render() { return ( <li className="child">id: {this.props.id} - group: {this.props.group}</li> ); } }); ReactDOM.render( <Parent />, document.getElementById('app') ); 

If I find Child with id 6 property, how can I select all Child components that are in the same group, i.e. group 2?

NB: I am new to React and sorry if the title is misleading.

Answer 1

I would apply this to a local state:

In a nutshell, we generate a state variable for the current group of the parent element. Then we give each child a proxy method that he calls on onMouseEnter , where he passes his group prop to the parent method. Each render then compares the active group with its own group and sets up active support for the child. Then the child checks his active support to apply the active class. Obviously, you can greatly expand this behavior. Check out the React event system here .

This violin is a very rudimentary example of how it works:

https://jsfiddle.net/69z2wepo/53444/

CSS

 .active { background-color: yellow; } 

Js

 const Parent = React.createClass({ getInitialState() { return { group: null } }, render() { const rows = []; let group = 1; for (let i = 1; i <= 12; i++) { const child = <Child key={i} id={i} group={group} hover={(group) => this.setState({ group })} active={group === this.state.group} />; rows.push(child); if (i % 3 === 0) { group++; } } return ( <ul> {rows} </ul> ); } }); const Child = React.createClass({ render() { return ( <li className={this.props.active && 'active'} onMouseEnter={() => this.props.hover(this.props.group)} > id: {this.props.id} - group: {this.props.group} </li> ); } }); ReactDOM.render( <Parent />, document.getElementById('app') ); 

Answer 2

Well, this can be done using simple css + code with some changes. First, if you have few groups, which means lists of groups, which means a list of lists. You will have a Container component, a Group component, and a GroupItem component. The container will display several group components that will display several GroupItem components.

It will be something like this:

 export default class Container extends React.Component { render() { return(<ul> {this.state.groups.map((group) => { return <Group items={group.items} /> })} </ul>) } } export default class Group extends React.Component { render() { return (<ul> {this.props.items.map((item) => { return <GroupItem /> })} </ul>) } } export default class GroupItem extends React.Component { render() { return (<li>some content here</li>); } } 

now give each group a class that, when you point out, will highlight the sons:

 .group:hover > li { background-color: color; } 

now when you hover over a group that looks like a single element hovering but applies to all elements, all its children will be highlighted