Option to replace null values in data-react-props attribute with undefined

[MaySoMusician]

I'm currently working on a Rails+React project, and planning to eliminate nulls from type definitions in the frontend and to replace them with undefined (or just use optional props like prop?: Foo) as possible, since I can't be bothered about nervous distinction between null and undefined when defining the types.

react-rails passes the values from Rails to React via data-react-props HTML attribute with JSON, in the specification of which undefined is not defined (no pun intended). Due to this, in the part of converting them to JSON, we have no choice than converting Ruby's nils to JSON's nulls.

But on the other hand, we could convert JSON's nulls either to JS's null (current implementation) or to its undefined. I want an option to select one of that ways.

[ahangarha]

It makes sense.

@justin808 if you agree with this change, should add it to v3?

[MaySoMusician]

I'd be ready for dealing with this, submitting a PR, if I'm allowed

[ahangarha]

Any contribution is highly appreciated 🙂

[MaySoMusician]

Submitted a PR #1273

[justin808]

@MaySoMusician why does this need to go into the library? It shouldn't.

I think your example makes sense, but the right place to put the code is after your JS code receives the props.

Either convert the props when received in your own library method, which you provided in this PR.

Or in JavaScript, there are a few ways to check if a variable is undefined or null. The (someObject['key'] == null) looks convenient, but many might not like ==.

From chatgpt:

Using the typeof operator:

You can use the typeof operator to check if a variable is undefined. If the variable is null, typeof will also return "object". Here's an example:

let x;

if (typeof x === 'undefined' || x === null) {
  // x is undefined or null
}

Using the == or === operator:

You can also use the == or === operator to check if a variable is undefined or null. The == operator performs type coercion, so it will return true if the variable is either undefined or null. The === operator checks for strict equality, so it will only return true if the variable is exactly undefined or null. Here's an example:

let x;

if (x == null) {
  // x is undefined or null
}

if (x === undefined || x === null) {
  // x is exactly undefined or null
}

Using optional chaining:

If you are using a recent version of JavaScript that supports optional chaining, you can use the ?. operator to check if a variable is undefined or null. Here's an example:

const obj = {
  prop: null
};

if (obj.prop?.foo === undefined) {
  // obj.prop.foo is undefined or null
}

Note that in the last example, if obj.prop is null, obj.prop?.foo will evaluate to undefined, and the condition will be true. If obj.prop is undefined, obj.prop?.foo will also evaluate to undefined, and the condition will be true. If obj.prop is an object with a foo property, obj.prop?.foo will evaluate to the value of the foo property, and the condition will be false.

[MaySoMusician]

I'm not talking about JavaScript. I already knew how to check if the value of the props is null or undefined and have already used optional chainings for long.

The real problem is that, in TypeScript, you must declare nullably in the type definitions all of the props that are likely to be nil in Rails side as long as you use this library. The problem doesn't lie in after you receive the props in a react component, but before the library passes them to a component. Because the type is evaluated before you receive the props.

For example, the following code works but has no sense to me in terms of those want to eliminate null from the type definitions.

// `react_component("UserPage", @props)` in Rails side
// ------------------------------------------------------
// UserPage.tsx
type UserPageProps = {
  name: string;
  age: number | null;  // <--- annoying
}

const UserPage: FC<UserPageProps> = ({ name, age }) => {
  return <UserCard name={name}
                   age={age ?? undefined} /> // <--- annoying, too
}

// ------------------------------------------------------
// UserCard.tsx
type UserCardProps = {
  name: string;
  age?: number;
}

const UserCard: FC<UserCardProps> = ({ name, age }) => {
  return (
    <>
      <p>{ name }</p>
      {age ? <Age age={age} /> : <p>Age: unknown</p>}
    </>
  )
}

To remove any | null from the type definitions of the components Rails calls (seen above), we have to change the implementation of the library. As long as UJS passes null to a component, this can't be solved.

[Judahmeek]

Closing discussion since it's been agreed to implement this detail.

See #1273