Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React does not recognize the inputRef prop on a DOM element #364

Open
Mustafa-Agha opened this issue Jun 15, 2021 · 11 comments
Open

React does not recognize the inputRef prop on a DOM element #364

Mustafa-Agha opened this issue Jun 15, 2021 · 11 comments

Comments

@Mustafa-Agha
Copy link

Mustafa-Agha commented Jun 15, 2021

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 ?

@benpingilley
Copy link

Experiencing the same issue.

@raptoria
Copy link

+1

@mddarmawan
Copy link

Same here.

@AaryanAdil
Copy link

+1

@samsungapore
Copy link

samsungapore commented Aug 31, 2021

having the same issue (using Next.js)

@enricomad
Copy link

duplicate of #347

@laolaolulu
Copy link

+1

@kulabros
Copy link

kulabros commented Dec 7, 2021

+1 .... When I try rjv demo, there's no warning on json editing start. In my application, when I try te edit any element, I got this warning in the time I click to edit icon. I can't recognise the main difference in my vs. demo code, which causes this warning.. Thanks for any help

@enricomad
Copy link

@kulabros the issue is triggered by newer versions of react (compared to demo code), which the lib is not compatible with anymore.
more details in #347

@dranitski
Copy link

upvote the fix by @enricomad #374 🆙

@RodrigosTiago
Copy link

Same problem here until today :D Do I have to do anything to fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests