i have this breadcrump component that map over props and renders a list of chip components like this:
class BreadCrumb extends React.Component { render () { const { steps, activeIndex } = this.props; const chips = steps .map((step,index) => { return <Chip key={index} title={step.category} onClick = {()=> this.props.selectChip(index)} // this should be passed only if // active == true active={activeIndex >= index} /> }) return ( <div className="chip-container"> {chips} </div> ) } }
i need to click on chips only if his active prop is true, this is the chip component
class Chip extends React.Component { render(){ const { active, title } = this.props; const activeClassName = active ? 'chip active' : 'chip'; return ( <div className = {activeClassName} onClick = {() => this.props.onClick()} > <span>{title}</span> </div> ) } }
how can i make chip clickable only if the active prop is true?
For further information selectChip() function sets the state of a component App, parent of Breadcrump component, so it is binded to App component.
Advertisement
Answer
Either execute the handler or an empty function
onClick = {isActive ? this.props.onClick : () =>{} } >