MDBDropdown has issue when using in react-styleguidist about mdb-react-ui-kit HOT 6 CLOSED

Hi!

Is it possible to share your code (at least the code of the whole MDBDropdown component and structure. The sample repository, or more code would be great)? I see the problem is with React.cloneElement, there are no elements to clone, so I think for now the problem is there.

Keep coding!

from mdb-react-ui-kit.

Hi @krzysiu-w

Here I am sharing a zip of my sample code.

I have searched for the reason and found that when any null argument pass into MDBDropdownItem this issue occurs
<MDBDropdownItem onClick={() => setIsShow(true)}>
<span>Simple search</span>
{isShow && (<i className='fas fa-check ml-2'></i>)} // The issue occurs here
</MDBDropdownItem>
<MDBDropdownItem onClick={() => setIsShow(false)}>
<span>Extended search</span>
{!isShow && (<i className='fas fa-check ml-2'></i>)} // The issue occurs here
</MDBDropdownItem>

mdbDropDownDemo.zip

Thanks

from mdb-react-ui-kit.

Hi!

The problem is that your MDBDropdownItem component doesn't have any children if it is rendered conditionally. So when your isShow is true the second item is empty and if it has false - the first one, so the React.cloneChild can't map the children. To avoid that you can just render conditionally the whole item as I show below - it works perfectly :)

<MDBDropdown>
<MDBDropdownToggle className='btn btn-white waves-effect px-3 mr-2 ml-0 mt-0 mb-3 p-2 icon-btn'>
<i className='fa fa-search mr-2 text-primary'></i>
<span>Search options</span>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem onClick={() => console.log('click reload')}>
<i className='fas fa-sync-alt mr-2'></i>
<span>Refresh</span>
</MDBDropdownItem>
{isShow && (
<MDBDropdownItem onClick={() => setIsShow(false)}>
<span>Simple search</span>
<i className='fas fa-check ml-2'></i>
</MDBDropdownItem>
)}
{!isShow && (
<MDBDropdownItem onClick={() => setIsShow(true)}>
<span>Extended search</span>
<i className='fas fa-check ml-2'></i>
</MDBDropdownItem>
)}
<MDBDropdownItem
onClick={() => console.log('click column chooser')}
>
<span>Select columns</span>
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>

Keep coding!

from mdb-react-ui-kit.

Hi @krzysiu-w

Thanks for the solution.

I have updated my code as you suggest, but my requirement is only toggle the icon, not the whole item.

And this is working fine with previous version (mdb4) and it's better to keep item and toggle only the icon on specific condition.

So kindly look into it.

Thanks

from mdb-react-ui-kit.

Hi!

That's a logical problem. When React checks this statement {isShow && (<i className='fas fa-check ml-2'></i>)} it expects an additional node. So when the isShow state is set to false - Array.cloneChild tries to render a child that doesn't exist. To avoid that you also can use a ternary operator instead of logical AND one and return an, i.e., empty span like below:

<MDBDropdownItem onClick={() => setIsShow(false)}>
<span>Simple search</span>
{isShow ? (
<i className='fas fa-check ml-2'></i>
) : (
<span></span>
)}
</MDBDropdownItem>

Keep coding!

from mdb-react-ui-kit.

Thanks @krzysiu-w

from mdb-react-ui-kit.