I am creating a list where you can select from (button style) you can only click to one button. I am able to highlight the item from list when is active. What I can't seem to unselect if I happen to choose another item from the list. Here is my code for my ponent:
var styles = {
active: {
backgroundColor: '#337ab7',
color: '#ffffff'
},
inactive: {
backgroundColor: 'inherit',
color: 'inherit'
}
};
var CustomerRolo = React.createClass({
getInitialState() {
return {active: false}
},
handleToggle: function(e) {
e.preventDefault();
//console.log(lastSelection)
this.setState({ active: !this.state.active});
console.log(React.findDOMNode(this.refs.active))
},
render: function(){
const stateStyle = this.state.active ? styles.active : styles.inactive
return(
<a href="" className='anker' onClick={this.handleToggle}>
<div id='rolo' style = {stateStyle}>
<h5 className="listitems"><strong>{this.props.customer.lastname + ", " + this.props.customer.name}</strong></h5>
<p>{this.props.customer.mobile}</p>
<hr/>
</div>
</a>
)
}
});
I am rendering this into a main ponent and passing the props from that ponent however the state of active true or false is being managed inside the CustomerRolo ponent. Here is the main ponent:
var Jobs = React.createClass({
getInitialState() {
return {jobs: this.props.jobs,
customers: this.props.customers}
},
addCustomer: function(customer) {
var customers = React.addons.update(this.state.customers, { $push: [customer] })
this.setState({ customers: customers });
},
buttonStyle: {
backgroundColor: 'lightblue',
paddingTop: '5px',
paddingBottom: '5px',
width: '150px',
height: '35px',
marginTop: '0',
marginBottom: '1px',
borderRadius: '5px'
},
render: function() {
return(
<div className="container">
<div className="row">
<div className="col-md-10">
<h2 className="title">Jobs</h2>
</div>
</div>
<div className="row">
<div className="col-md-4">
<CustomerForm handleNewCustomer={this.addCustomer}/>
</div>
</div>
<div className="row">
<div id='customerrolo' className="col-md-4">
{this.state.customers.map(function(customer, index) {
return <CustomerRolo key={index} customer={customer}/>}.bind(this))}
</div>
<div id = "years" className="col-md-4">
{this.props.years.map(function(year){
return <Years key={year['Year']} year={year}/>}.bind(this))}
</div>
</div>
<div className="row">
<div className="col-md-10">
<table className="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th>Plate</th>
<th>Make</th>
<th>Model</th>
<th>Created</th>
<th>Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.jobs.map(function(job) {
return <Job key={job.id} job={job}/>}.bind(this))}
</tbody>
</table>
</div>
</div>
</div>
)
}
})
I am creating a list where you can select from (button style) you can only click to one button. I am able to highlight the item from list when is active. What I can't seem to unselect if I happen to choose another item from the list. Here is my code for my ponent:
var styles = {
active: {
backgroundColor: '#337ab7',
color: '#ffffff'
},
inactive: {
backgroundColor: 'inherit',
color: 'inherit'
}
};
var CustomerRolo = React.createClass({
getInitialState() {
return {active: false}
},
handleToggle: function(e) {
e.preventDefault();
//console.log(lastSelection)
this.setState({ active: !this.state.active});
console.log(React.findDOMNode(this.refs.active))
},
render: function(){
const stateStyle = this.state.active ? styles.active : styles.inactive
return(
<a href="" className='anker' onClick={this.handleToggle}>
<div id='rolo' style = {stateStyle}>
<h5 className="listitems"><strong>{this.props.customer.lastname + ", " + this.props.customer.name}</strong></h5>
<p>{this.props.customer.mobile}</p>
<hr/>
</div>
</a>
)
}
});
I am rendering this into a main ponent and passing the props from that ponent however the state of active true or false is being managed inside the CustomerRolo ponent. Here is the main ponent:
var Jobs = React.createClass({
getInitialState() {
return {jobs: this.props.jobs,
customers: this.props.customers}
},
addCustomer: function(customer) {
var customers = React.addons.update(this.state.customers, { $push: [customer] })
this.setState({ customers: customers });
},
buttonStyle: {
backgroundColor: 'lightblue',
paddingTop: '5px',
paddingBottom: '5px',
width: '150px',
height: '35px',
marginTop: '0',
marginBottom: '1px',
borderRadius: '5px'
},
render: function() {
return(
<div className="container">
<div className="row">
<div className="col-md-10">
<h2 className="title">Jobs</h2>
</div>
</div>
<div className="row">
<div className="col-md-4">
<CustomerForm handleNewCustomer={this.addCustomer}/>
</div>
</div>
<div className="row">
<div id='customerrolo' className="col-md-4">
{this.state.customers.map(function(customer, index) {
return <CustomerRolo key={index} customer={customer}/>}.bind(this))}
</div>
<div id = "years" className="col-md-4">
{this.props.years.map(function(year){
return <Years key={year['Year']} year={year}/>}.bind(this))}
</div>
</div>
<div className="row">
<div className="col-md-10">
<table className="table table-hover">
<thead>
<tr>
<th>Customer</th>
<th>Plate</th>
<th>Make</th>
<th>Model</th>
<th>Created</th>
<th>Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.jobs.map(function(job) {
return <Job key={job.id} job={job}/>}.bind(this))}
</tbody>
</table>
</div>
</div>
</div>
)
}
})
1 Answer
Reset to default 6Rather then storing the active state in the list item store it in the parent instead. So the list item takes two props onToggle and active these will essentially the this.state.active and this.handleToggle
render: function() {
return (
<li
style={this.props.active ? aStyle : iStyle}
onClick={this.props.onToggle}
>
hi
</li>
)
}
now move those to the parent list ponent (your second one I presume) so the parent stores which customer is active and sets that prop from state
render: function() {
var active = this.state.activeIndex;
var Rolo = customers.map(function(customer, index){
return (
<CustomerRolo
active={index === active}
onToggle={this.handleToggle.bind(null, idx}/>
)
}, this)
},
handleToggle: function(index) {
this.setState({ activeIndex: index })
}