score:86

Accepted answer

What you are passing is interpreted by the compiler as a boolean attribute. This is also true for when writing pure HTML; attributes without values are interpreted as a boolean true. Since JSX is a syntactic-sugar for writing HTML, it makes sense that it has the same behavior.

The official React documentation has the following:

Boolean Attributes

This often comes up when using HTML form elements, with attributes like disabled, required, checked and readOnly. Omitting the value of an attribute causes JSX to treat it as true. To pass false an attribute expression must be used.

// These two are equivalent in JSX for disabling a button

<input type="button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button

<input type="button" />;
<input type="button" disabled={false} />;

Example

JSX:

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS:

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

Check the babel demo of this, here.

Solution

As ctrlplusb stated, if you want to pass an "empty prop" you can simply give it the value of null or even undefined.

So you could do:

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Though I will note that passing it as undefined is probably entirely unnecessary because reading this.props.autoHeight from AnotherComponent will always give you undefined, regardless if you explicitly passed it as autoHeight={undefined} or not at all. Passing null is probably better in such cases since you are explicitly passing the prop by stating that it has the value of... "no value" (i.e null).

score:4

TL;DR: Set empty string:

<Amp.AmpAccordion animate="">

Explanation

A copy+paste from the link above:

Any attribute with an empty string will render into the DOM without a value.

W3C relevant documentation: https://www.w3.org/TR/html5/syntax.html#elements-attributes

Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.

In the following example, the disabled attribute is given with the empty attribute syntax:

<input disabled>

If an attribute using the empty attribute syntax is to be followed by another attribute, then there must be a space character separating the two.

score:10

Yeah JSX sees properties without a = as being a boolean true.

One option is to simply set null values:

<Foo name="Bob" surname={null} />

You could also dynamically build a property bag via an object and only add the properties if required. For example:

render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = 'bob';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}

Related Query

More Query from same tag