When I try to use react-json-view to render expandable row in a functional component in a table I get this error when I use onEdit method
React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element
code
import { Table } from 'antd';
const columns = [
{
title: 'ID',
dataIndex: 'id',
}
];
<Table
rowKey="id"
columns={columns}
dataSource={data}
expandable={{
expandedRowRender: (record) => (
<ExpandedRow record={record} />
),
}}
/>;
//ExpandedRow child component
import { FC } from 'react';
import ReactJson from 'react-json-view';
interface IExpandedRow {
record: any;
}
const ExpandedRow: FC<IExpandedRow> = ({ record, ...rest }: IExpandedRow) => {
const onEdit = (data: any) => {
console.log(data);
};
return (
<>
<ReactJson
{...rest}
onEdit={onEdit}
src={record}
/>
</>
);
};
export default ExpandedRow;
I tried to create ref and pass it to ExpandedRow component but I got the same error, am I doing something wrong here ?
When I try to use react-json-view to render expandable row in a functional component in a table I get this error when I use onEdit method
React does not recognize the
inputRefprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseinputrefinstead. If you accidentally passed it from a parent component, remove it from the DOM elementcode
I tried to create ref and pass it to ExpandedRow component but I got the same error, am I doing something wrong here ?