I have a component that I am using that has a list that, if an item on it is clicked, will output certain data related to that item. The react class looks like:
SocialMenu = React.createClass({
getInitialState: function(){
return { focused: 0 };
},
clicked: function(index){
// The click handler will update the state with
// the index of the focused menu entry
this.setState({focused: index});
},
render: function() {
// Here we will read the items property, which was passed
// as an attribute when the component was created
var self = this;
// The map method will loop over the array of menu entries,
// and will return a new array with <li> elements.
return (
<div>
<ul className="testblocks">{ this.props.items.map(function(m, index){
var style = '';
if(self.state.focused == index){
style = 'focused';
}
// Notice the use of the bind() method. It makes the
// index available to the clicked function:
return <li key={index} className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
}) }
</ul>
<p>Selected: {this.props.items[this.state.focused]}</p>
</div>
);
}
});
EDIT:
Component would look like this I suppose:
ItemDetails = React.createClass({
render: function() {
return (
<div>{this.props.item}</div>
);
}
});
This works fine when I put it in the SocialMenu component, but if I want to put it anywhere else on the page, the output is undefined. How do I deal with this?
EDIT:
I am trying to set it up so it goes in a component like this:
Description = React.createClass({
getInitialState: function() {
return { default: true };
},
render: function() {
return (
<section id="one" className="main style1">
<div className="container">
<ItemDetails />
<span className="image fit">
<img src="images/pic01.jpg" alt="" />
</span>
</div>
</section>
);
}
});
and the <ItemDetails /> component should show the relevant output related to the click on the specific item in the list in SocialMenu. If I just feed it props (<ItemDetails items={['items', 'some more'}/>), it will just print out what it is fed.
If I put SocialMenu in the Description component, then the list is showing in that section (which I do not want).
