React - Call parent method from within child component - reactjs

Question

Apologies for the noob question but I'm reasonably new to React. I've seen a few similar questions on here to what I'm stuck with but I believe my requirements are slightly different.
I'm creating an Accordion component which is the parent of child AccordionItem components. I have given each AccordionItem its own state to keep track on whether the item is in an open or closed state. This works well and I now have a working accordion where each item can open or close when you click on the item's title.
However I now want to add functionality where if an AccordionItem is already in an open state it will close when another AccordionItem is selected. I believe I will need a state array or object within my Accordion.js which keeps track of currently selected AccordionItems which will then be updated on each click.
I'm struggling to work out how to pass a parent method down to the child component though.
My App.js currently looks like the below:
class App extends Component {
render() {
return (
<Accordion>
<AccordionItem title="Question One Title" itemid="question1" openOnLoad onChange={this.updateSelectedItems}>
<p>here is some text 1</p>
</AccordionItem>
<AccordionItem title="Question Two Title" itemid="question2" onChange={this.updateSelectedItems}>
<p>here is some text 2</p>
</AccordionItem>
<AccordionItem title="Question Three Title" itemid="question3" onChange={this.updateSelectedItems}>
<p>here is some text 3</p>
</AccordionItem>
</Accordion>
);
}
}
All the examples I've seen online show the parent having a prop which passes a reference of the chosen parent method down to the child component. However because my AccordionItems are defined in App.js rather than Accordion.js this.updateSelectedItems doesn't exist in this file.
I don't want to move the AccordionItems into the Accordion because then every Accordion would have the same data.
Thoughts?

Answer 1

Here's something I threw together. Working JSFiddle here: https://jsfiddle.net/gkysmsqz/6/
Accordion should maintain the active index for which accordion section should be shown. You can clone each child and add some extra props to them before render (active and toggleSection in the example below):
class App extends React.Component {
render() {
return (
<Accordion>
<AccordionItem title="Question One Title" itemid="question1" openOnLoad onChange={this.updateSelectedItems}>
<p>here is some text 1</p>
</AccordionItem>
<AccordionItem title="Question Two Title" itemid="question2" onChange={this.updateSelectedItems}>
<p>here is some text 2</p>
</AccordionItem>
<AccordionItem title="Question Three Title" itemid="question3" onChange={this.updateSelectedItems}>
<p>here is some text 3</p>
</AccordionItem>
</Accordion>
);
}
}
class Accordion extends React.Component {
state = {
activeIndex: 0
};
toggleSection = index => {
this.setState({
activeIndex: index
});
};
render() {
const rows = this.props.children.map( (child, i) => {
return React.cloneElement(child, { active: i === this.state.activeIndex, toggleSection: this.toggleSection.bind(this, i) });
});
return (
<div>
{rows}
</div>
);
}
}
const AccordionItem = props => (
<div>
<span onClick={props.toggleSection}>{props.title}</span>
<div className={props.active ? 'active accordion-item' : 'accordion-item'}>
{props.children}
</div>
</div>
);

Answer 2

I think you might find helpful this article https://reactjs.org/docs/composition-vs-inheritance.html.
In your case you might do something like this inside your Accordion component's render method:
render() {
return (
<div>
{
this.props.children.map(
child => {
child.passedMethod = this.updateSelectedItems;
return child;
}
)
}
</div>
);
}

Answer 3

If Accordion is keeping track of the AccordionItem components, then you should just let Accordion handle the rendering of AccordionItems.
App.js
class App extends Component {
render() {
return
<Accordion />;
}
Accordion.js
updateItems = () => ...
render() {
return (
<div>
<AccordionItem title="Question One Title" itemid="question1" openOnLoad onChange={this.updateSelectedItems}>
<p>here is some text 1</p>
</AccordionItem>
<AccordionItem title="Question Two Title" itemid="question2" onChange={this.updateSelectedItems}>
<p>here is some text 2</p>
</AccordionItem>
<AccordionItem title="Question Three Title" itemid="question3" onChange={this.updateSelectedItems}>
<p>here is some text 3</p>
</AccordionItem>
</div>
);
}

Answer 4

Go by the Reactjs basics, maintain your state in Parent (Accordion) and pass that state to all child (AccordionItem). Also, you need to pass an event handler (which will update parent state), it will be called when any child (AccordionItem) is selected.