How to parse '<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />'?

user_10238279 0
Viewed 301

I think I understand why the first instance of isActive that's passed as an argument to the arrow function is encapsulated in curly brackets, i.e. { isActive }, while the second isActive is not encapsulated in curly brackets, but would like to be sure I understand correctly.

Is the first "isActive" that's encapsulated in curly brackets i.e., ({ isActive }) an example of Object Destructuring ? (If not, doesn't an arrow function in JS expect to receive the name of a variable, but doesn't { isActive } evaluate to true or false?)

Am I right that this is an example of Object Destructuring?

react-router reactjs javascript
1 Answers

Your understanding is right. react-router v6 has changed the NavLink API a bit. You need to provide the isActive wrapped in an object as opposed to in NavLink v5.

export interface NavLinkProps
  extends Omit<LinkProps, "className" | "style" | "children"> {
  children:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  caseSensitive?: boolean;
  className?: string | ((props: { isActive: boolean }) => string | undefined);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean }) => React.CSSProperties);
}
user_85104050
Related