making reusable component in reactjs - reactjs

Question

I have the following code, want to remove the repeated content code inside <ReactCSSTransitionGroup to a separate file - does not look straight forward to pass props to and fro from child/parent, how do I do it? is it do-able?
<div className="container">
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<span key={this.state.showChild1} className="plus_icon">
<a onClick={() => this.onClick('child1')}>
<Img className={this.state.showChild1 ? 'plus_icon' : 'minus_icon'} />
</a>
</span>
</ReactCSSTransitionGroup>
{this.state.child1 ? <Child1-New /> : <div onClick={() => this.onClick('child1')}><Child1 /></div>}
</div>
<div className="container">
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<span key={this.state.showChild2} className="plus_arrow">
<a onClick={() => this.onClick('child2')}>
<img className={this.state.child2 ? 'plus_icon' : 'minus_icon'} />
</a>
</span>
</ReactCSSTransitionGroup>
{this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>}
</div>
onClick(name) {
if (name === 'child1') {
this.setState({
showChild1: !this.state.showChild1,
});
} else if (name === 'child2') {
this.setState({
showChild2: !this.state.showChild2,
});
}
planning to achieve something like:
<div className="container">
<ToggleView />
{this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>}
</div>

Answer 1

If you're using Node.js it's quite simple to manage your components in separate JS files.
Create a new JS file - ToggleView.js - as an example.
var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<div>
... Your markup etc here
</div>
);
});
And then you can require it from within the JS where you want to use it:
var ToggleView = require('ToggleView.js');
And then use it:
<div className="container">
<ToggleView />
</div>
Secondly, if your state is managed at the parent which you need your children to have access to, you can simply prop down to them.
function thisFunc(val) {
// do something
};
Prop the function to the child
<ToggleView handleFunc={this.thisFunc} />
And in ToggleView.js, if you needed your to trigger on click:
...
<a onClick={this.prop.handleFunc}>
<img ... />
</a>
...
In this scenario, we prop thisFunc down to the child which will allow you to set the logic at the parent, whether you need to set state or whatever.
Hopefully this helps!