REACT ref.current is null in conditional rendered component

Question

i'd like to achieve open react-datepicker calendar on button click outside of this component with ref. It is working fine if its outside of conditional rendering. If i put into a condition statementm i'll get TypeError: this.calendarRef.current is null. It is class component and calendarRef is defined in constructor.

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import DatePicker from "react-datepicker";

const MyCustomDatePicker = React.forwardRef((props, ref) => (
   <DatePicker
    ref={ref}
    selected={new Date()}
    popperPlacement="bottom-start"
    monthsShown={2}
   />
));

class DateRangeCustom extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          currentDate: '01/12/2021',
          ddCalendarOn: false,
          endDate: '08/12/2021',
    };

    this.calendarRef = React.createRef();
}

handleCalendarBtnClick = () => {
    console.log('*** HANDLE CALENDAR BTN ***');
    this.setState((state) => ({
        ddCalendarOn: !state.ddCalendarOn
    }));
    this.calendarRef.current.setOpen(true);
}

render() {
    console.log('*** render ****')
    return (
        <Grid container>
            <Grid>
                <Grid container direction="column">
                    <Button
                        onClick={this.handleCalendarBtnClick}
                    >
                        SHOW
                    </Button>
                    {this.state.ddCalendarOn && <MyCustomDatePicker
                        ref={this.calendarRef}
                    />}                        
                </Grid>
            </Grid>
        </Grid>
    );
  }
}

export default DateRangeCustom;

Thank you for any advice.

Why do you declare MyCustomDatePicker inside another component? Where is ay conditional rendering occurring that you are referring to? Can you include a full component example so we may see everything that touches that calendarRef? — Drew Reese
– Drew Reese, Commented Jan 30, 2021 at 23:06
@DrewReese thank you, my fault with copying and cleaning my code, for easyiest example. Is there better way how to get ref to child component? i found it in some example that's the reason :) i'm new in react and still learning. Thank you for any help:) — J.Rautner
– J.Rautner, Commented Jan 30, 2021 at 23:36
@DrewReese you were right, no need for ref or some inner component declaration. — J.Rautner
– J.Rautner, Commented Jan 31, 2021 at 10:08

Chrissi Grilus · Accepted Answer · 2021-01-31 02:10:23Z

0

The ref is registered on the component once rendered. But you render it conditionally with: this.state.ddCalendarOn and then try to call it imperativly directly. This will not work because a state change will cause a render and only then the ref is registered.

I would try to use a more declarative approach, I would think that the API allows that. Something like:

<MyCustomDatePicker ref={this.calendarRef} open={this.state.ddCalendarOn}/>

Then you handle the open state on the Callendar component itself. React has in mind to use this declarative approach whenever possible and only seldomly you will have to use a ref to imperativly call something. The Callendar will not render when you set its "open" prop to false, the result should be the same.

answered Jan 31, 2021 at 2:10

Chrissi Grilus

1,4453 gold badges15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J.Rautner Over a year ago

Thank you, Chrissi, i found out there's no nead for ref or custom picker... beginners mistake... Your answer pushed me to correct direction. Thank you :)

J.Rautner · Accepted Answer · 2021-01-31 10:06:43Z

0

My bad,

pretty easy thing and stupid mistake. There's no need for using ref or forwardRef. Just set open to the same variable as is in condition for rendering makes it work.

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import DatePicker from "react-datepicker";

class DateRangeCustom extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          currentDate: '01/12/2021',
          ddCalendarOn: false,
          endDate: '08/12/2021',
    };
}

handleCalendarBtnClick = () => {
    console.log('*** HANDLE CALENDAR BTN ***');
    this.setState((state) => ({
        ddCalendarOn: !state.ddCalendarOn
    }))
}

render() {
    console.log('*** render ****')
    return (
        <Grid container>
            <Grid>
                <Grid container direction="column">
                    <Button
                        onClick={this.handleCalendarBtnClick}
                    >
                        SHOW
                    </Button>
                    {this.state.ddCalendarOn && <DatePicker
                       open={this.state.ddCalendarOn}
                       selected={new Date()}
                       popperPlacement="bottom-start"
                       monthsShown={2}
                    />}                        
                </Grid>
            </Grid>
        </Grid>
    );
  }
}

export default DateRangeCustom;

answered Jan 31, 2021 at 10:06

J.Rautner

33 bronze badges

4 Comments

Chrissi Grilus Over a year ago

Yes, this was what I was refering to. But you can omit " {this.state.ddCalendarOn && " as well. I would think that the calendar is only rendered when open so there is no loss in removing this conditional rendering.

J.Rautner Over a year ago

@ChrissiGrilus no, if i omit that statement, input textfield of datepicker will be rendered by default. set flag to open cause that datepicker will be rendered with input and also calendar.

Chrissi Grilus Over a year ago

That is weird but as long as it works for you thats great. Which UI lib are you using?

J.Rautner Over a year ago

@ChrissiGrilus Most of the time Material UI

Collectives™ on Stack Overflow

REACT ref.current is null in conditional rendered component

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related