Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React's defaultProps will be remove from function components in a future release #1471

Open
1 of 12 tasks
Th1nkK1D opened this issue Jun 7, 2024 · 4 comments
Open
1 of 12 tasks
Labels
bug Something isn't working

Comments

@Th1nkK1D
Copy link

Th1nkK1D commented Jun 7, 2024

I am interested in helping provide a fix!

Yes

Which generators are impacted?

  • All
  • Angular
  • HTML
  • Preact
  • Qwik
  • React
  • React-Native
  • Solid
  • Stencil
  • Svelte
  • Vue
  • Web components

Reproduction case

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMAi6BmBDZAGxgAUoIxU4BfOHckOAcgAEAjZYQgE3SgDpgEAPQhgMCKmComAbgBQ84ADsYffAGN0cMhSoJ5cOADc8hZOgD8ALjioYUFQHMF1RegAekWHF74i8DjIyhowQspwALIAngDCEOAQyuiqABRg5JS2upQAlIiGKBjY%2FsQ5qKkGRkam5ui2TAAW6ISEEEwANIXUuQqFUOgwyFARADzcwMYAfAgZevy1FtSjwhPTrkA

Expected Behaviour

Default props are defined with ES6 default parameters.

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent({ value: "hello" }: Props) {
  return <div>{value}</div>;
}

export default MyComponent;

PS. The playground doesn't not support TypeScript at the monent.

Actual Behaviour

Using defaultProps which will be removed in React 19.

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent(props: Props) {
  return <div>{props.value}</div>;
}

MyComponent.defaultProps = { value: "hello" };

export default MyComponent;

The error was also shown in the console.

image

Additional Information

defaultProps will be removed in place of ES6 default parameters in React 19
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops

@manucorporat
Copy link
Contributor

manucorporat commented Jun 13, 2024

Props destructuring might be a bit complicated to implement, in the meantime, i suggest to do:

import * as React from "react";

interface Props {
  value?: string;
}

function MyComponent(props Props) {
  props = {
    ...props,
    value: props.value ?? "hello",
  }
  return <div>{props.value}</div>;
}

export default MyComponent;

however, i agree the props destructuring way is better, beautiful and more idiomatic

@WesselSmit
Copy link

@manucorporat This does not work as

  props = {
    ...props,
    value: props.value ?? "hello",
  }

is entirely removed from the compiled output. The same happens if I try to assign it a new variable e.g.

  const defaultedProps = {
    ...props,
    value: props.value ?? "hello",
  }

and results in

function MyComponent(props: Props) {
  return <div>{props.value}</div>; // <-- 'props.value' is possibly 'undefined'
}

I am using the latest version of mitosis and mitosis-cli (0.3.9).

@samijaber
Copy link
Contributor

@WesselSmit , Manu is suggesting how to implement the default props within the react generator, not how to write the Mitosis component.

@WesselSmit
Copy link

@samijaber Ah check. My bad, I missed that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants