How to use different default props in React?

Question

I have a react component that receives an id from its props.

export type MyComponentProps = {
  id: string
}

export const MyComponent = function(props: MyComponentProps) {
  return (
    <div>{props.id}</div>
  );
}

Now, I want to make the id optional, but I do have a requirement to use identifiers so I make the id as optional and add a default prop.

import { v4 } from 'uuid';

export type MyComponentProps = {
  id?: string
}

export const MyComponent = function(props: MyComponentProps) {
  return (
    <div>{props.id}</div>
  );
}

MyComponent.defaultProps = {
  id: `MyComponent-${v4()}`
}

Done! Except, now, if I render 2 different instances of MyComponent they will have the same id. How do I work around this? What I did is the following, but I am no react expert and I don't know if there is another way to accomplish this.

import { v4 } from 'uuid';

export type MyComponentProps = {
  id?: string
}

export const MyComponent = function(props: MyComponentProps) {
  const id = props.id?? `MyComponent-${v4()}`;
  return (
    <div>{id}</div>
  );
}

One problem with your final implementation, potentially, is that the ID changes every time the component renders. But it's unclear what you actually need the ID for, maybe that's OK. — jonrsharpe
– jonrsharpe, Commented May 5, 2022 at 20:47
The id is used for the html component attributes required by bootstrap to... say open an accordion for example. So, due to the nature of UUIDs it won't really make a difference recalculating the ID every time (as long as they are unique), from a performance perspective, and at a larger scale it may cause some impact. So using a state to store that id as stated by @Ben West in the answer below is the way to go. — sebsmgzz
– sebsmgzz, Commented May 9, 2022 at 14:13

Ben West · Accepted Answer · 2022-05-05 21:03:52Z

1

If you want a per-component ID that stays the same between renders, you'll need to put it in state.

export const MyComponent = function(props: MyComponentProps) {
  const [defaultId] = useState(v4)
  const id = props.id ?? defaultId
  return (
    <div>{id}</div>
  );
}

answered May 5, 2022 at 21:03

Ben West

4,5861 gold badge19 silver badges17 bronze badges

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

Comments

Develophir · Accepted Answer · 2024-05-26 23:55:08Z

0

Technically, cacheing a value is possible using currying by implementing an HOC.

A basic implementation would look like:

import { useRef } from "react";
import { v4 as uuidv4 } from "uuid";

const withId = (Component: React.FC) => ({ children, ...props }) => {
    const id = useRef(uuidv4).current;
    return <Component {...props} id={id} />;
}

const ComponentWithId = withId(Component);

/* Usage */
interface WithId {
    id: string;
}

interface Props extends WithId {}

const Component = ({ id }: Props) => {
    return <div id={id}>Some content</div>;
}

answered May 26, 2024 at 23:55

Develophir

1726 bronze badges

Collectives™ on Stack Overflow

How to use different default props in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related