Ad

React Unselect From List While Selecting Another Item

- 1 answer

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 component:

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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 component and passing the props from that component however the state of active true or false is being managed inside the CustomerRolo component. Here is the main component:

    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>
    )
}
  })
Ad

Answer

Rather 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 component (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 })
}
Ad
source: stackoverflow.com
Ad