How to pass props using Custom Component

[aquaductape]

I'm running into a situation where I need to pass a prop to the CustomComponent. I've looked through the documentation and I couldn't find a solution, I'm hoping you guys know something and I might have missed it.

import React, { FC, useState, forwardRef } from "react";
import { ReactSortable } from "react-sortablejs";

// This is just like a normal component, but now has a ref.
const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
 // grandProp needs to be used here
 const someFunc = () => props.granProp
  return <div ref={ref}>{props.children}</div>;
});

export const BasicFunction: FC = ({grandProp}) => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" }
  ]);

  return (
    // how to pass grandProp to custom tag?
    <ReactSortable tag={CustomComponent} list={state} setList={setState}>
      {state.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

If there's no solution, then I'll fork, and create an option that passes props, that could look something like this

<ReactSortable 
tag={CustomComponent} 
list={state} setList={setState} 
passProps={{grandProp}}>
...
<ReactSortable>

[Tammy-zting]

How to do?

[andresin87]

The tag prop type is ReactHTML. The only possible values are HTMLAnchorElement. Does not admit ReactComponents. You can add it wrapping ReactSortable.

[pillys]

I need too, wrapping is not a good idea, some scene do not need wrapping elements.

[GO-Lorenzo]

I'm facing the same issue.

[abder]

Facing the same issue here

[Tammy-zting]

周婷婷已收到您的邮件，谢谢！！