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:

Pass these three refs to the Index component
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?

AmerllicA · Accepted Answer · 2020-05-05 22:39:30Z

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.

answered May 5, 2020 at 22:39

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

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

5 Comments

henrie Over a year ago

How can I access the ref values in the handleUpdate function in index.js?

AmerllicA Over a year ago

@henrie, your comment shows you even didn't see the ReactJS doc about ref. it is simple, try one of those three by using this.nameRef.current.

henrie Over a year ago

I actually went tthrough the Docs and I logged this.nameRef.current to console but didnt get the expected result..Here is result I got this <input class="" name="dob" type="month" value="2020-04">, that is why I had to ask

AmerllicA Over a year ago

@henrie, what do you expect? what do you wanna see in your console log? it is the exactly right thing.

henrie Over a year ago

oww!..I think I get it now, Thanks for your help

Collectives™ on Stack Overflow

Passing Multiple Refs from Child Component to Parent Component-Reactjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related