I'm trying to set the width of a ponent by using the useRef hook in React but I clearly am not grokking the pattern. The codesandbox can be found here: . Thanks!

import React, {useRef} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Foo />
    </div>
  );
}

const Foo = () => {
  const { current: btn } = useRef(null);
  return (
    <React.Fragment>
      <button ref={btn}>buuuuttttoooon</button>
      <div style={{ width: btn.style.width, backgroundColor: 'pink', height: '50px' }} />
    </React.Fragment>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I'm trying to set the width of a ponent by using the useRef hook in React but I clearly am not grokking the pattern. The codesandbox can be found here: https://codesandbox.io/s/vqn5jyv9y5 . Thanks!

import React, {useRef} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Foo />
    </div>
  );
}

const Foo = () => {
  const { current: btn } = useRef(null);
  return (
    <React.Fragment>
      <button ref={btn}>buuuuttttoooon</button>
      <div style={{ width: btn.style.width, backgroundColor: 'pink', height: '50px' }} />
    </React.Fragment>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• javascript
• reactjs

1 Answer 1

btn is ing as null which is causing trouble and also ref will pick the style you defined on ponent level. If I understand correctly then on the basis of 1st HTML element you want to modify the styling of another HTML element.

Please find the code I modified using state -

const Foo = () => {
  const [count, setCount] = React.useState('100px')
  const refElem = React.useRef(0)
  return (
    <>
      <button 
        ref={refElem => {
            if(refElem) {
              setCount(refElem.style.width)
            }
          }
        }
        style={{
          width: '700px'
        }}>This is a button 1</button>
      <hr />
      <button style={{width: count}}>This is a button 2 = {count}</button>
      <hr />
    </>
  )
}

Working Example - https://codepen.io/swapnesh/pen/ywPRWG