CODEWITHSUNDEEP
javascriptreactjs
NONAMA
NONAMA

Reputation: 523

React change state dynamicly for multiple components

I have an issue with React Component. I have this

class SidebarItem extends React.Component{
constructor(props) {
    super(props)
    this.state = { isActive: false }
}
handleClick() {
    var active = !this.state.isActive;
    this.setState({ isActive: active });
}
render() {
    var className = 'item';
    if(this.state.isActive){className = 'active item'} else {className = 'item'};
    return (
        <Link className={className} to={this.props.href} onClick={this.handleClick.bind(this)}>
            {this.props.label}
        </Link>
    );
}
}


export class Sidebar extends React.Component {
constructor(props) {
    super(props)
}
render() {
    var elements = this.props.defaults.elements.map(function (i) {
        return (
            <SidebarItem label={i.label} href={i.href} key={i.label} />
        );
    });
    return (
            <div className={this.props.defaults.class}>
                {elements}
            </div>
    );
}
};

My aim is to change className for the active element of menu. I can't understand, how I must translate for all elements to clear active state and get active only for one clicked element?

Upvotes: 2

Views: 7102

Answers (1)

The Reason
The Reason

Reputation: 7983

I think you are looking for something like this

class Menu extends React.Component {
  constructor(){
    super()
    this.state = {
      items: ['Hello', 'world', 'it', 'is', 'me'],
      active: 0
    }
  }
  click(index){
    this.setState({active: index})
  }
  render(){
    const list = this.state.items.map((item,index) => {
      return <Item key={index} 
        className={this.state.active === index ? 'active' : ''} 
        text={item}
        click={this.click.bind(this, index)}
      />
    })
    return <ul>
        {list}
    </ul>
  }
}

class Item extends React.Component {
  render(){
    return <li onClick={this.props.click} 
             className={this.props.className}>
             {this.props.text}
           </li>        
  }
}


React.render(<Menu />, document.getElementById('container'));

Hope it will help you fiddle

Upvotes: 3

Related Questions