Error when conditionally rendering Icon inside Control

[ruggi99]

Describe the bug Error when conditionally rendering Icon inside Control

To Reproduce Steps to reproduce the behavior:

<Control>
  {props.valid && <Icon />}
  <Input />
</Control>

if valid prop evaluates to true, children will be [Icon, Input]. If evaluates to false, children will be [false, Input]. So in https://github.com/couds/react-bulma-components/blob/9505961eb825ec671c5af3452e85386502de7d79/src/components/form/components/control.js#L21

type will throw an error

Expected behavior No error thrown

Screenshots Not applicable

Versions

• react-bulma-components:: 4.0.0
• bulma: 0.9.2
• react: 17.0.2
• Browser: Chrome 90

Additional context We should check if a child is of type object before continuing. React children can be of any type.

[couds]

Thanks for reporting. I will take a look this afternoon

[couds]

@ruggi99 are you using Typescript?

I just remember that I use conditional render for the Icon on storybook without issues

https://github.com/couds/react-bulma-components/blob/9505961eb825ec671c5af3452e85386502de7d79/src/components/form/stories/form.story.js#L241-L247

Also can you add the error message that you are getting?

Thanks

[ruggi99]

I'm not using Typescript but only javascript. I just used the file you linked and i get the same error. The error is "cannot read "type" property of type null" or something similar. I'm not home at the moment but I'll try to explain me better later...

[couds]

I will add an extra check to ensure child exists, that should avoid the issue. (the weird thing is that the storybook do not fail)

[couds]

@ruggi99 Fixed on 45f75b201e11de7157875f40c756ded5b5bbc75e and already released on v4.0.1.

Can you close this after checking that everything works for you?

Thanks

[ruggi99]

Just tried and it works. Thanks

Closing.