0

here my sandbox: https://stackblitz.com/edit/react-h1uaph

My console returns me

ref.current is null

but I cant understand since I pass the ref in the function arguments. I have read I cant access ref from the render function, maybe by analogy it is the same for the returns function -here in a functional component? BUt if it is the case how can I access to the ref from a functional component?

here my snippet:

import React from "react"
import ReactDOM from "react-dom"

const accessRef=(elementRef)=>{
  if(elementRef && !elementRef.current) console.log("elementRef.current is null")

}

function App() {

  let child1=React.createRef(); 

  return(
        <div 
          ref={child1}
          name="child1"
          className="circle_container pic2" 
          style={accessRef(child1)}
        >  hello world
        </div> 
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

any hint would be great, thanks

Webwoman
  • 10,196
  • 12
  • 43
  • 87

1 Answers1

1
const accessRef = async elementRef => {
  if (elementRef && !elementRef.current) {
    const foo = await elementRef;
    console.log(foo.current);
  }
};
Mauricio Carlezzo
  • 140
  • 1
  • 7
  • thanks a lot, do you get the following error message too: Unhandled promise rejection TypeError: ""_d" is read-only" ? – Webwoman Jun 12 '19 at 19:18
  • You are welcome, No I didn't get that error, what are you trying to do? @Webwoman – Mauricio Carlezzo Jun 12 '19 at 20:34
  • I have run it on stackblitz and get this error but locally is good, I just want to make some styling using the state of my react element – Webwoman Jun 12 '19 at 20:42
  • 1
    @Webwoman why you are styling the element by refs, you can return the new style from access Ref function! But, good if everything its working – Mauricio Carlezzo Jun 13 '19 at 12:29