Allow reference between 2 components – React

For a project, I was trying to have 2 different components interact with each other. Concretely, I had 2 date pickers and I wanted to ensure only one was open at a time…

The way to do it was to ensure that on the opening of one, I was closing the other one.

The context and target is then the following:

...
<DatePicker id={1} onDisplay={closeAllOtherDayPickers}>
<DatePicker id={2} onDisplay={closeAllOtherDayPickers}>
...

Being new to React, I was trying to reference one component to the other using variables declaring the components such as:

...
let datePicker1 = <DatePicker onDisplay={() => closeDatePicker(datePicker1)}>
let datePicker2 = <DatePicker onDisplay={() => closeDatePicker(datePicker1)}>
...
return( //I'm in a function component
...
{datePicker1}
{datePicker2}
...
)

Unfortunately, it was not working…

I eventually found my salvation in refs (see React refs).
By using those refs, I was able to generate a reference to the other component and be able to act on it from the first component.

It went eventually like this:

...
let refDatePicker1 = useRef();
let refDatePicker2 = useRef();
...
return( //I'm in a function component
...
<DatePicker ref={refDatePicker1} onDisplay={() => closeDatePicker(refDatePicker2)}>

<DatePicker ref={refDatePicker2} onDisplay={() => closeDatePicker(refDatePicker1)}>
...
)

I know it’s optimizable but for a first attempt, it introduces me to the ref for me to manage to get out of my issue.