0

I have a parent - Planner, and two children - Calendar and Week.

I want to display an element from Calendar to Week. I already can access the element in Planner using refs, but I am not sure how to forward the ref from Planner to Week.

import React from 'react';
import Calendar from './Calendar';
import Week from './Week';
const {connect} = require('react-redux');

class Planner extends React.Component {
    constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }

    componentDidMount() {
        this.weekRef = this.childRef.current;
    }

    render() {
        return (
            <div>
                <Calendar ref={this.childRef}/>
                <Week ref={this.weekRef}/>;
            </div>
        );
    }
}

const Container = connect()(Planner);

export default Container;

so i can get the necessary refs from Calendar to Planner in this.childRef but I want to forward/pass it onto Week component to use it.

import React from 'react';
import { withRouter } from 'react-router-dom';

class Week extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log('week ref', this.props);
    }

    render() {
        return (
            <div className="Week"> 
               Week!
            </div>
        )
    }
}

export default React.forwardRef((props,ref) => <Week {...props} ref={ref} />);

not really sure what i am doing. any help is greatly appreciated.

Rumba
  • 181
  • 1
  • 2
  • 9
  • Will you please add your Calendar component as well? In this example, nothing is setting the value of your refs. – BEVR1337 Feb 25 '20 at 21:11
  • 1
    This seems an odd thing to do. What do you plan on doing with the ref? You said "I want to display an element from Calendar to Week.", but i don't understand what that means or why a ref is needed for that. – Nicholas Tower Feb 25 '20 at 21:14
  • @BEVR1337 my Calendar component is very big, but there are multiple refs from Calendar and I can access them in the parent (Planner). I do need help in passing those refs from Planner down to Week. I have read about forward refs but I am very much confused on how to implement them from reading the React docs. – Rumba Feb 25 '20 at 21:18
  • It looks like you're correctly forwarding them, but this is not what refs are for. Changing a ref's value will not trigger React to rerender. ONLY props and component state will make a component render in React. If you post a codesandbox or something like that, we can help better. – BEVR1337 Feb 25 '20 at 21:19
  • @BEVR1337 sorry, so I do have a problem accessing them in Week, as `componentDidMount() { console.log('week ref', this.props); } ` outputs it to null while `componentDidMount() { this.weekRef = this.childRef.current; }` in Planner correctly renders the refs object I need. – Rumba Feb 25 '20 at 21:21
  • Changing a refs value will never cause a component to rerender. So if you change a ref's value in component A, component B is going to have a null value. We really need the full code to be more helpful. – BEVR1337 Feb 25 '20 at 21:23
  • @BEVR1337 hmmm ok so in `componentDidMount() { this.weekRef = this.childRef.current; }` i did change the value of `this.weekRef`, but how do I then pass that value to `Week`? I am not changing a ref's value. I just need to know how to pass the ref that I got from `Calendar` that got passed up to its parent `Planner`, and pass that down to the child `Week` and use it. – Rumba Feb 25 '20 at 21:30
  • From what it sounds like using `ref`s is not the best/proper solution for what you're trying to do. You should perhaps provide an example of what is exactly that you're trying to do and then we can provide a better solution. – goto Feb 25 '20 at 21:54
  • @goto1 i want to display some elements in `Calendar` in `Week`, i.e. if I click on a date in `Calendar`, it would display the corresponding week that that date belongs to, in `Week`. – Rumba Feb 25 '20 at 22:14
  • You should just do this with `state` rather than `refs` - that'd be the right way to do this. – goto Feb 25 '20 at 23:08

0 Answers0