Validation functions with react

Question

I am trying with React to do a validation, with a footer which has several buttons, then each one has its value (home, orders, payments, among others), I want that when it is located in one of them, it will be check (I already have that in css), I have not managed to make the correct setState to achieve it.

interface State {
  value: any,
  isActive: boolean
}

class Footer extends React.PureComponent<Props, State>{
  state: State = {
    value: '',
    isActive: false
  }

  render() {
    const { isActive } = this.state
    return (
      <IonFooter>
        <div className="footer-menu-home">
          <button value="home" onClick={() => this.props.history.push('/home')}>
            {isActive && (<div>
                <img src={iconHomeActive} alt="" />
              </div>
            )}
            {!isActive && (
              <div>
                <img src={iconHomeInactive} alt="" />
              </div>
            )}
          ...
         </button> 
         <button onClick={() =>this.props.history.push('/orders')} >
              <div>
                <img src={iconOrderInactive} alt="" />
              </div>
              Orders
                  </button>
        </div>
      </IonFooter>    
    );
  }
}

Basically, when he's on any of those, show him as active, only where he's standing I don't know how to tell it or how to make the example stand on orders take the value of the property that I pass by button

It is what I carry and have tried to do to achieve what I want — arthuro ali
– arthuro ali, Commented Aug 1, 2020 at 4:41

brijesh-pant · Accepted Answer · 2020-08-01 05:44:48Z

1

Note: It looks like you're using some routing library as well. It'd make sense and I recommend to make use of it to see if the link you're is active, or, not. Check this https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900

Nevertheless, you can still achieve the same with your current functionality like this:

// check if state/button value is same as the route pathname
const isActive = this.props.history.location.pathname.split('/')[1] === this.state.value 

// set value in button click handler
handleButtonClick = (value) => () => {
  this.setState({
    value
  }, () => {
    this.props.history.push(`/${value}`)
  })
}
<button onClick={handleButtonClick('home')} />

// conditionally render based on isActive
{isActive ? (
    <img src={iconHomeActive} alt="" />
) : (
    <img src={iconHomeInactive} alt="" />
)}

Update: Ques: To this function can I pass the value by the button label? example: value: "home"

You can use event to access the properties of button element like this

  handleButtonClick = (event) => {
    const value = event.target.value;
    // similarly const name = event.target.name;
    this.setState({
      value
    }, () => {
      this.props.history.push(`/${value}`)
    })
  }

Ques: in case you want to pass a className = "active", how could you put a conditional that when removed does not show more active?

<button className={!!isActive && 'active'} onClick={handleButtonClick} />

edited Aug 1, 2020 at 5:44

answered Aug 1, 2020 at 5:05

brijesh-pant

1,1851 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

arthuro ali Over a year ago

Ok, this worked for me a little, I just need that when you change the view it does not show as active where the condition is {isActive &&, if not if I leave that view it turns off, I thank you very much for your time spent

arthuro ali Over a year ago

To this function can I pass the value by the button label? example: value: "home" and in case you want to pass a className = "active", how could you put a conditional that when removed does not show more active? Sorry i'm new to react

brijesh-pant Over a year ago

@arthuroali Updated comment above

arthuro ali Over a year ago

Just (Parameter 'event' implicitly has an 'any' type. and Type 'false | "active"' is not assignable to type 'string | undefined'. Type 'false' is not assignable to type 'string | undefined'.ts(2322) index.d.ts(1743, 9): The expected type comes from property 'className' which is declared here on type

brijesh-pant Over a year ago

@arthuroali These are typescript related errors because of incorrect types, you would need to change it to typescript based code. Take a look at this github.com/typescript-cheatsheets/react-typescript-cheatsheet

Collectives™ on Stack Overflow

Validation functions with react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related