Forwarding Refs: forwardedRef is always null

Multi tool use
I have an ant design Table
component that I want ref
to be attached to.
I want to be able to use the tableRef
in HOC withCustomPagination
's lifecycle componentDidUpdate
method.
Following the React Docs Forwarding Refs, that I could not clearly comprehend. I could cook up the following code:
App.js
import WrappedTable from '/path/to/file';
class App extends React.Component {
render() {
const tableRef = React.createRef();
return (
<WrappedTable ref={tableRef} />
)
}
}
Table.js
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={this.props.forwardedRef} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
withCustomPagination.js
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
After debugging, I find that forwardedRef
is always null.
javascript reactjs
add a comment |
I have an ant design Table
component that I want ref
to be attached to.
I want to be able to use the tableRef
in HOC withCustomPagination
's lifecycle componentDidUpdate
method.
Following the React Docs Forwarding Refs, that I could not clearly comprehend. I could cook up the following code:
App.js
import WrappedTable from '/path/to/file';
class App extends React.Component {
render() {
const tableRef = React.createRef();
return (
<WrappedTable ref={tableRef} />
)
}
}
Table.js
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={this.props.forwardedRef} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
withCustomPagination.js
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
After debugging, I find that forwardedRef
is always null.
javascript reactjs
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
v 16.6.3, After further debugging the code I have found out that,ref
is actually aConnect
when Iconsole.log(tableRef)
inApp.js
, because I have usedreact-redux
connect function like thisexport default connect(x,y)(WrappedTable)
. I am still debugging the code.
– HarshvardhanSharma
Dec 30 '18 at 21:14
add a comment |
I have an ant design Table
component that I want ref
to be attached to.
I want to be able to use the tableRef
in HOC withCustomPagination
's lifecycle componentDidUpdate
method.
Following the React Docs Forwarding Refs, that I could not clearly comprehend. I could cook up the following code:
App.js
import WrappedTable from '/path/to/file';
class App extends React.Component {
render() {
const tableRef = React.createRef();
return (
<WrappedTable ref={tableRef} />
)
}
}
Table.js
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={this.props.forwardedRef} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
withCustomPagination.js
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
After debugging, I find that forwardedRef
is always null.
javascript reactjs
I have an ant design Table
component that I want ref
to be attached to.
I want to be able to use the tableRef
in HOC withCustomPagination
's lifecycle componentDidUpdate
method.
Following the React Docs Forwarding Refs, that I could not clearly comprehend. I could cook up the following code:
App.js
import WrappedTable from '/path/to/file';
class App extends React.Component {
render() {
const tableRef = React.createRef();
return (
<WrappedTable ref={tableRef} />
)
}
}
Table.js
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={this.props.forwardedRef} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
withCustomPagination.js
import CustomPagination from 'path/to/file';
const withCustomPagination = tableRef => Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
tableRef.current.state ..... //logic using ref, Error for this line
this.state.rows ..... //some logic
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
After debugging, I find that forwardedRef
is always null.
javascript reactjs
javascript reactjs
edited Dec 30 '18 at 20:35
HarshvardhanSharma
asked Dec 30 '18 at 20:26
HarshvardhanSharmaHarshvardhanSharma
125111
125111
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
v 16.6.3, After further debugging the code I have found out that,ref
is actually aConnect
when Iconsole.log(tableRef)
inApp.js
, because I have usedreact-redux
connect function like thisexport default connect(x,y)(WrappedTable)
. I am still debugging the code.
– HarshvardhanSharma
Dec 30 '18 at 21:14
add a comment |
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
v 16.6.3, After further debugging the code I have found out that,ref
is actually aConnect
when Iconsole.log(tableRef)
inApp.js
, because I have usedreact-redux
connect function like thisexport default connect(x,y)(WrappedTable)
. I am still debugging the code.
– HarshvardhanSharma
Dec 30 '18 at 21:14
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
v 16.6.3, After further debugging the code I have found out that,
ref
is actually a Connect
when I console.log(tableRef)
in App.js
, because I have used react-redux
connect function like this export default connect(x,y)(WrappedTable)
. I am still debugging the code.– HarshvardhanSharma
Dec 30 '18 at 21:14
v 16.6.3, After further debugging the code I have found out that,
ref
is actually a Connect
when I console.log(tableRef)
in App.js
, because I have used react-redux
connect function like this export default connect(x,y)(WrappedTable)
. I am still debugging the code.– HarshvardhanSharma
Dec 30 '18 at 21:14
add a comment |
2 Answers
2
active
oldest
votes
Your issue is happening in your HOC:
here
const withCustomPagination = tableRef => Component => {
You need to remove that parameter. The way to access to the ref prop is simply in your componentDidUpdate
method like forwardedRef
prop e.g:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
Also somethings to have in account are:
You should not create the ref in the render method because this method is raised every time you set a state. I recommend you to do it in the constructor:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
Also in you HOC render only one child or use React.Fragment
. Besides do not forget the send the rest properties:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
EDIT:
Add the reference of the ref prop
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
I am not gettingforwardedRef
as the antd table element that I actually need, instead it isConnect
when I exportexport default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.
– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need theTableContainer
ref in the HOC?
– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
add a comment |
To access the tableRef
in HOC withCustomPagination
, I removed const tableRef = React.createRef()
from App.js and the corresponding ref = {tableRef}
lines.
I pass tableRef
to HOC, curried, withCustomPagination(tableRef)(NewGiftCardTable)
. I also removed all the Forwarding Refs logic in HOC, this I did because I needed access to tableRef
only in HOC and not in App.js.
Added above removed lines to Table.js:
import withCustomPagination from '/path/to/file';
const tableRef = React.createRef();
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={tableRef} />
}
const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981160%2fforwarding-refs-forwardedref-is-always-null%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your issue is happening in your HOC:
here
const withCustomPagination = tableRef => Component => {
You need to remove that parameter. The way to access to the ref prop is simply in your componentDidUpdate
method like forwardedRef
prop e.g:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
Also somethings to have in account are:
You should not create the ref in the render method because this method is raised every time you set a state. I recommend you to do it in the constructor:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
Also in you HOC render only one child or use React.Fragment
. Besides do not forget the send the rest properties:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
EDIT:
Add the reference of the ref prop
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
I am not gettingforwardedRef
as the antd table element that I actually need, instead it isConnect
when I exportexport default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.
– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need theTableContainer
ref in the HOC?
– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
add a comment |
Your issue is happening in your HOC:
here
const withCustomPagination = tableRef => Component => {
You need to remove that parameter. The way to access to the ref prop is simply in your componentDidUpdate
method like forwardedRef
prop e.g:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
Also somethings to have in account are:
You should not create the ref in the render method because this method is raised every time you set a state. I recommend you to do it in the constructor:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
Also in you HOC render only one child or use React.Fragment
. Besides do not forget the send the rest properties:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
EDIT:
Add the reference of the ref prop
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
I am not gettingforwardedRef
as the antd table element that I actually need, instead it isConnect
when I exportexport default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.
– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need theTableContainer
ref in the HOC?
– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
add a comment |
Your issue is happening in your HOC:
here
const withCustomPagination = tableRef => Component => {
You need to remove that parameter. The way to access to the ref prop is simply in your componentDidUpdate
method like forwardedRef
prop e.g:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
Also somethings to have in account are:
You should not create the ref in the render method because this method is raised every time you set a state. I recommend you to do it in the constructor:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
Also in you HOC render only one child or use React.Fragment
. Besides do not forget the send the rest properties:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
EDIT:
Add the reference of the ref prop
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
Your issue is happening in your HOC:
here
const withCustomPagination = tableRef => Component => {
You need to remove that parameter. The way to access to the ref prop is simply in your componentDidUpdate
method like forwardedRef
prop e.g:
import CustomPagination from 'path/to/file';
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
const { forwardedRef } = this.props;
return (
<Component {...this.state} ref={forwardedRef} />
<CustomPagination />
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
Also somethings to have in account are:
You should not create the ref in the render method because this method is raised every time you set a state. I recommend you to do it in the constructor:
import WrappedTable from '/path/to/file';
class App extends React.Component {
constructor(){
super();
this.reference = React.createRef();
}
render() {
return (
<WrappedTable ref={this.reference} />
)
}
}
Also in you HOC render only one child or use React.Fragment
. Besides do not forget the send the rest properties:
const withCustomPagination = Component => {
class WithCustomPagination extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
}
componentDidUpdate() {
//You got the ref here
console.log(forwardedRef.current)
}
render() {
// Do not forget to send the rest of properties here like:
const { forwardedRef, ...rest } = this.props;
return (
<React.Fragment>
<Component {...this.state} ref={forwardedRef} {...rest} />
<CustomPagination />
</React.Fragment>
)
}
}
return React.forwardRef((props, ref) => {
return <WithCustomPagination {...props} forwardedRef={ref} />;
});
}
export default withCustomPagination;
EDIT:
Add the reference of the ref prop
import withCustomPagination from '/path/to/file';
class Table extends React.Component {
constructor(props) {
super(props);
this.reference = React.createRef();
}
render() {
<TableContainer ref={this.reference} />
}
}
const WrappedTable = withCustomPagination(Table);
export default WrappedTable;
edited Dec 30 '18 at 22:38
answered Dec 30 '18 at 21:58


SergioEscuderoSergioEscudero
1,023516
1,023516
I am not gettingforwardedRef
as the antd table element that I actually need, instead it isConnect
when I exportexport default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.
– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need theTableContainer
ref in the HOC?
– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
add a comment |
I am not gettingforwardedRef
as the antd table element that I actually need, instead it isConnect
when I exportexport default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.
– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need theTableContainer
ref in the HOC?
– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
I am not getting
forwardedRef
as the antd table element that I actually need, instead it is Connect
when I export export default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.– HarshvardhanSharma
Dec 30 '18 at 22:29
I am not getting
forwardedRef
as the antd table element that I actually need, instead it is Connect
when I export export default connect(x,y)(WrappedTable)
from Table.js. If I remove connect, I am still not getting the desired element.– HarshvardhanSharma
Dec 30 '18 at 22:29
Do you need the
TableContainer
ref in the HOC?– SergioEscudero
Dec 30 '18 at 22:32
Do you need the
TableContainer
ref in the HOC?– SergioEscudero
Dec 30 '18 at 22:32
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Yes, it is the ant design Table component that I need.
– HarshvardhanSharma
Dec 30 '18 at 22:36
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
Check the edit I performed
– SergioEscudero
Dec 30 '18 at 22:39
add a comment |
To access the tableRef
in HOC withCustomPagination
, I removed const tableRef = React.createRef()
from App.js and the corresponding ref = {tableRef}
lines.
I pass tableRef
to HOC, curried, withCustomPagination(tableRef)(NewGiftCardTable)
. I also removed all the Forwarding Refs logic in HOC, this I did because I needed access to tableRef
only in HOC and not in App.js.
Added above removed lines to Table.js:
import withCustomPagination from '/path/to/file';
const tableRef = React.createRef();
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={tableRef} />
}
const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;
add a comment |
To access the tableRef
in HOC withCustomPagination
, I removed const tableRef = React.createRef()
from App.js and the corresponding ref = {tableRef}
lines.
I pass tableRef
to HOC, curried, withCustomPagination(tableRef)(NewGiftCardTable)
. I also removed all the Forwarding Refs logic in HOC, this I did because I needed access to tableRef
only in HOC and not in App.js.
Added above removed lines to Table.js:
import withCustomPagination from '/path/to/file';
const tableRef = React.createRef();
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={tableRef} />
}
const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;
add a comment |
To access the tableRef
in HOC withCustomPagination
, I removed const tableRef = React.createRef()
from App.js and the corresponding ref = {tableRef}
lines.
I pass tableRef
to HOC, curried, withCustomPagination(tableRef)(NewGiftCardTable)
. I also removed all the Forwarding Refs logic in HOC, this I did because I needed access to tableRef
only in HOC and not in App.js.
Added above removed lines to Table.js:
import withCustomPagination from '/path/to/file';
const tableRef = React.createRef();
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={tableRef} />
}
const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;
To access the tableRef
in HOC withCustomPagination
, I removed const tableRef = React.createRef()
from App.js and the corresponding ref = {tableRef}
lines.
I pass tableRef
to HOC, curried, withCustomPagination(tableRef)(NewGiftCardTable)
. I also removed all the Forwarding Refs logic in HOC, this I did because I needed access to tableRef
only in HOC and not in App.js.
Added above removed lines to Table.js:
import withCustomPagination from '/path/to/file';
const tableRef = React.createRef();
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
<TableContainer ref={tableRef} />
}
const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;
answered Dec 30 '18 at 22:21
HarshvardhanSharmaHarshvardhanSharma
125111
125111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981160%2fforwarding-refs-forwardedref-is-always-null%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
5qMy,9DFO1nMwe5kzZXlVUSGknV2o2qn XkGB4 m,JTZiblyZkACBO5ful7 232bQ i0V1H2GNlOUVCR8CSzXuNiALgb94u 5jRgFw
What is your react version ?
– SergioEscudero
Dec 30 '18 at 21:09
v 16.6.3, After further debugging the code I have found out that,
ref
is actually aConnect
when Iconsole.log(tableRef)
inApp.js
, because I have usedreact-redux
connect function like thisexport default connect(x,y)(WrappedTable)
. I am still debugging the code.– HarshvardhanSharma
Dec 30 '18 at 21:14