CODEWITHSUNDEEP
javascriptreactjsreact-props
The Walrus
The Walrus

Reputation: 1208

How does one pass a prop as null in react?

i have a conundrum.

I have text I want toggling in a component.

basically true => tick and false => untick but i want a 3rd scenario where I don't want any text displayed

if I don't pass the prop to that component, it is automatically assuming true. can I pass propName={null} or something like that?

or will i have to extract this into a function (i'd much rather not)

Upvotes: 1

Views: 2904

Answers (2)

James Allardice
James Allardice

Reputation: 166001

If you do not provide the prop to the component it will not be present in the object representing props within that component. You could therefore check whether or not the prop is defined:

const Component = (props) => {
  if (props.checked === undefined) {
     return <Something />;
  }

  return <SomethingElse someProp={props.checked} />;
};

Then, this will render Something:

<Component />

And these will all render SomethingElse:

<Component checked />
<Component checked={true} />
<Component checked={false} />

Upvotes: 2

Umair Abid
Umair Abid

Reputation: 1463

You can have a third state null but then you will need to do explicit comparisons i.e a == false and don't evaluate a as it will become false in case of null as well

Upvotes: 0

Related Questions