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

@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).

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

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