Passing Multiple Refs from Child Component to Parent Component-Reactjs

Question

I have two components, the Edit(child) and the Index(parent). There are three input boxes in the Edit component and I'll like to:

1. Pass these three refs to the Index component

2. Compare these inputs gotten via refs (in the HandleUpdate function specifically)

Edit.js:

<form onSubmit={props.handleUpdate}>
        <input 
            className=""
            name="name" 
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue= {props.name} /> 
        <input 
            className=""
            type="number" 
            name="day"
            min="1" 
            max="31"
            ref={props.setRef}
            onChange={props.handleChange}
            defaultValue= {props.day}  />
        <input 
            className=""
            name="dob"
            type="month"    
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue={props.dob} />

Index.js:

class BirthdaylistKeeper extends React.Component{
    constructor(props){
        super(props);
   //state
}
...
handleUpdate(event){
        event.preventDefault(); 
            //if((name.value === "") && (dob.value === "") && (day.value === "")){
            //  console.log("empty");
            //}

            const item = this.state.currentItem;
            let index = this.state.items.indexOf(item);
            const newItemList = [...this.state.items];
            newItemList.splice(index, 1, this.state.dataEdited);

            this.setState({ 
                items: [...newItemList],
                toggle: false 
            });

    }   
//...
render(){
        return(
            ...
                <Entry
                    name={this.state.name}
                    day={this.state.day}
                    dob={this.state.dob}
                    onChange={this.handleChange}
                    onSubmit={this.handleSubmit} 
                    setRef={this.setRef} /> 

)
}

How can I achieve this?

Answer 1

I have an idea, instead of passing refs from child to parent, make the refs in the parent and pass them to the child component and then assign them to each input element, something like the following codes:

The parent component:

import React, { Component, createRef } from 'react';

class BirthdaylistKeeper extends Component{
  constructor(props) {
    super(props);

    this.nameRef = createRef();
    this.dayRef = createRef();
    this.dobRef = createRef();

   //state
  }

  ~~~

  render() {
    return(

      ~~~

      <Entry
        nameRef={this.nameRef}
        dayRef={this.dayRef}
        dobRef={this.dobRef}
  }
}

And in the child component pass each ref to the related input element:

<form onSubmit={props.handleUpdate}>
  <input
    ~~~
    name="name"
    ~~~
    ref={props.nameRef}
    ~~~
  /> 
  <input
    ~~~
    name="day"
    ~~~
    ref={props.dayRef}
    ~~~
  />
  <input
    ~~~
    name="dob"
    ~~~
    ref={props.dobRef}
    ~~~
  />

Also, remember you should use separated refs for each input elements, not using one to all of them.