How to trigger a function after elements get rendered?

Question

I want to access an element using React.createRef() (which is inside a function). Below is the example of how I want to access it.

react:

someFunction = () => {
   let element = this.myRef.current;
   console.log(element)
}

render(){
  return(
     <FlexView>
        <div ref={this.myRef}>
          some text here 
        </div>
        {this.someFunction()}
     </FlexView>
  )
}

Here, I want to access the div element through someFunction(). But for some reason this.myRef.current is returning a null value in console - I guess the issue is related to react life cycle, but I just can't figure out why. However by using the button, I can able to access the div element without having any problem, but only when I try to use the above method to trigger a function it's returning null.

render(){
  return(
     <FlexView>
        <div ref={this.myRef}>
          some text here 
        </div>
        <button onClick={this.someFunction()}>click-here</button>
     </FlexView>
  )
}

Can someone please let me know how do it.

p.s. I'm new to React and Js

You need to call the function inside componentDidMount to get the data after comonent rendered like componentDidMount() { this.someFunction(); } . Working example here codesandbox.io/s/react-createref-forked-kwdbgd — Maniraj Murugan
– Maniraj Murugan, Commented Nov 18, 2022 at 11:41
I guess what you want here is an componentDidMount ... my bad thought a function component - A great visual reference here — KcH
– KcH, Commented Nov 18, 2022 at 11:42
Thanks for the visual reference you've shared @KcH. It'll be of great help. :) — Darkness
– Darkness, Commented Nov 18, 2022 at 12:11

Fahad Ali · Accepted Answer · 2022-11-18 11:46:45Z

1

  class Component extends React.Component{
      constructor(...args){
        super(args);
        this.ref = React.createRef();
      }
      state = {
        isLoaded = false;
      }
      componentDidMount(){
          this.setState({isLoaded:true})     
        }
      someFunction = () => {
         let element = this.myRef.current;
         console.log(element)
      }
      render(){
        <FlexView>
          <div ref={this.ref}>
            some text here 
          </div>
          <button onClick={this.someFunction}>click-here</button>
       </FlexView>
      }
        
    }

edited Nov 18, 2022 at 11:46

answered Nov 18, 2022 at 11:45

Fahad Ali

374 bronze badges

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

Comments

Tarmah · Accepted Answer · 2022-11-18 11:52:23Z

0

My guess is that in the first case the function is expected to return some html i.e div and since the function does not return anything it returns null and nothing is executed inside the render.

edited Nov 18, 2022 at 11:52

answered Nov 18, 2022 at 11:40

Tarmah

1597 bronze badges

4 Comments

Darkness Over a year ago

Yeah! But in both the cases, function get's executed. While in the first case, it's printing the proper div on console. But in the second case it's returning null as it doesn't able to read the element properly.

Tarmah Over a year ago

yes you are right . This is strange why it doesnt work here .

Darkness Over a year ago

Hmm yeahhh! However, componentDidMount worked for me in this. It works now. Thanks you so much @Tarmah

Tarmah Over a year ago

great to know :-)

Collectives™ on Stack Overflow

How to trigger a function after elements get rendered?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related