How to handle multiple values in props ( react query )

[vikramvi]

I’ve input component and want to pass 2 values to show it in unique way

<Input type="hover error" />

This is not working ?

What is the optimum way to handle multiple values ?

<Input type="hover" type="error" /> ?

I wish to handle hover uniquely in normal vs error scenario

[kevinSmith]

I guess I’m confused. Which is the type? Is there more than one type?

This:

<Input type="hover" type="error" /> 

won’t work. You can’t have two properties on the props object with the same name.

This:

<Input type="hover error" />

could work - you’d just have to know to split it out in the component.

But if you want 1 or more types, then I would want it named that way and I’d want an array:

<Input types={ ["hover", "error"] } />

If I understand what you want, that makes the most sense to me. But there are other ways to handle it.

[kevinSmith]

Another option, if you just want boolean flags for a few things would be:

<Input hover error /> 

Those would get passed in as boolean - you can check if they are truthy.

It just really depends on how you are thinking of the data.

[vikramvi]

Thanks for clarifications.

I wanted to have component which accept multiple values against its type

Do you suggest to use boolean flag or array approach ?

[kevinSmith]

I think any of the approaches listed will work fine, it just depends on what you need.

If there are only a few flags you need and they tend to be static (not changing), then the boolean flag approach can work well. It can also be dynamic by passing in actual boolean values. I don’t really like the array of strings approach, but I can imagine a situation where there were a lot of possible flags or values and maybe you don’t know what all the possibilities are before you start. Also, sometimes if I have a lot of flags, I put them in an object called something like “options”.

There are several different ways to handle this and you just have to figure out what works best for you. There may be more than one “best” approach.

[DanCouper]

Hover and error aren’t types, they’re Boolean states (if you’re doing what I think you’re doing and duplicating how HTML works). So seperate ones are preferable (though I suspect you might be doing something that’s already built into HTML, if this is to do with styling)

[vikramvi]

I didn’t understand your answer, can you please explain in simpler way ?

[vikramvi]

just to clarify does this explanation points to Conditional Rendering ?
So you’re suggesting instead instead of passing single value as <Input hover error /> do <Input options={ [ "hover", "error" ] } ?

[DanCouper]

input:hover {
  /* do something */
}

input:error {
  /* do something */
}

That’s CSS, which is what I think you’re copying (on purpose or inadvertently).

I would need to see more of your code, but this isn’t a good API:

<Input type="hover error" />

For several reasons.

Firstly, they aren’t types of input: an input that is hovered is not a kind of input, it’s the same input in a hover state. Same with error. The naming is confusing: these are states, not types.

Edit: just to clarify why it doesn’t make sense. Inputs already have types. Look:

<input type="text" />
<input type="email" />

So you can’t have a type of error, or hover, it doesn’t make sense

Secondly, how are you handling hover? If you are handling it in React, that means you need a reference (ref) to the element so that you can check whether it’s in a hover state. CSS handles this just fine, handling it in JS isn’t ideal. Error states are a little different – there are good reasons for handling that in JS, it gives you a little bit more control, but from a styling perspective, CSS also handles that just fine.

Thirdly, you’re using a single string. So now you need to write logic to convert the state of the input to a set of space-separated strings, then to convert from a set of space-separated strings to the logic. This is less of an issue if you use an array, but it’s still an issue. It’s complicated and error-prone, for no good reason.

So something like

<Input isHovered={true} hasError={false} /> 

Or

{/* has no error message, don't show as being in error: */}
<Input isHovered={true} error="" />
{/* has error message, show as being in error: */}
<Input isHovered={false} error="I am an error message" />

Would be much saner (again, having to write logic to check whether an element is hovered, particularly one that normally has no hover state, is IMO crackers, but if you feel it’s necessary, go for it).

[kevinSmith]

So you’re suggesting instead instead of passing single value …

No, I was suggesting that any of the approaches I listed could be valid depending on what you are trying to do. It’s really impossible to know which approach might be better without seeing the code.

I would suggest just picking one. You’ll learn how that works. In the process of doing it you may figure out that a different approach would have better. That is just part of learning. I think you’ll learn it better by trying them out rather than debating them endlessly. Just pick one that makes sense and go with it, see where it leads.