Changing state of component with OnClick in React

Question

I am trying to change state of the component and render it to page.

 var navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}]; class NavbarList extends React.Component { constructor() { super(); this.onClick = this.handleClick.bind(this); } handleClick(event) { const {id} = event.target; console.log(id); if(!navbarValue[id].Status){ {navbarValue.map((obj, index) =>{ if(navbarValue[index].Status){ navbarValue[index].Status = 0; return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li> } })} navbarValue[id].Status = 1; return <li className="active" key={id}><a id={id} onClick={this.onClick}>{navbarValue[id].Category}</a></li> } } render() { return ( <div className="navbar-wrapper"> <div className="container"> <nav className="navbar navbar-fixed-static-top navbar-inverse"> <div className="container"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span className="sr-only">Toggle navigation</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <a className="navbar-brand" href="#">BrandName</a> </div> <div id="navbar" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> {navbarValue.map((obj, index) => { if (obj.Status) return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li> return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li> })} </ul> </div> </div> </nav> </div> </div> )}; }; ReactDOM.render( <NavbarList />, document.getElementById('root') ); 

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

I have an if statement in handleClick(event) which validates if function has to be run and rerender elements.

First it checks if button which is already active is not being clicked. Next if statment is in loop to find previous active element, change objects property to 0 and render to not active.

At the end render new active element to active and set objects property to 1.

Answer 1

Put navbarValue in a state object and update the state onClick. You don't need if/else statements here. Because your components will be rerendered on state update.

Like this: https://stackoverflow.com/a/45134876/4953199