React - passing refs as a prop

Question

I am trying to manage a checkbox with react. The following code works well enough, but I want to refactor out the code in the render method so that it uses a Component. I want

Answer 1

Pass a callback ref into the Component, like that:

<Checkbox myRef={ref => (this.checkbox = ref)} />

Oh, and by the way, please always use callback refs. Read more here.

One more idea to consider for you: Move the checked value of the checkbox fully into the state of the AreRefsAwesomeCheckbox component and use a fully controlled component. That's always better than a ref with bigger predictability and less surprises.

Full code:

const Checkbox = ({myRef, changeInput, checkboxText}) => {
  return (
    <label>
      <input
        type="checkbox"
        ref={myRef}
        onChange={event => changeInput(event)}
      />
      <div> {checkboxText} </div>
    </label>
  )
}

export default class AreRefsAwesomeCheckbox extends Component {
  constructor(props) {
    super(props)
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  handleInputChange() {
    let data = {
      isFeatured: this.refs.check_me.checked,
    }

    postJSON('/some/url', data)
  }

  componentDidMount() {
    const data = getJSON('/some/url')
    data.then(object => {
      // this.checkbox is the reference to the checkbox element you need
      this.checkbox.checked = object.will_i_have_a_nice_checkbox
    })
  }

  render() {
    return (
      <div>
        <label>
          <Checkbox myRef={ref => (this.checkbox = ref)} />

          <div>Are refs good?</div>
        </label>
      </div>
    )
  }
}

Answer 2

Use createRef to create the ref that you end up passing down.

If you're passing a ref to a function component use React.forwardRef.

If you're passing a ref down to a class component ensure that the prop name is anything except ref or you'll get a special prop warning.