The example below implements a common pattern: using the ref callback to store a reference to a DOM node in an instance property.

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

    this.textInput = null;
    this.setTextInputRef = element => {      this.textInput = element;    };
    this.focusTextInput = () => {      // Focus the text input using the raw DOM API      if (this.textInput) this.textInput.focus();    };  }

  componentDidMount() {
    // autofocus the input on mount
    this.focusTextInput();  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}        />
      </div>
    );
  }
}
You can pass callback refs between components like you can with object refs that were created with React.createRef().

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}      />
    );
  }
}

If you use React older than 16.3 - please consider to examine callback refs.


import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class ChatWindow extends Component {
  constructor(props) {
    super(props);

    this.chatRef = React.createRef();
  }

  componentDidUpdate() {
    this.chatRef.current.scroll(0, 900)
  }

  render() {
    const mappedMessages = this.props.messages.map((item) => {
      return <p key={item._id} className="message light-grey">
        <Link className="link" to=''>{item.author}:</Link>
        {item.msg}
      </p>
    });

    return <div className="chat-window" ref={this.chatRef}>
      {mappedMessages}
    </div>
  }
};

If you want to obtain the individual refs for each input you should use the callback pattern. Note that String refs are deprecated and should not be used:


render() {
    return(
        <TextField
            name='title'
            type='text'
            label='Title'
            placeholder='Movie title...'
            autoFocus
            inputProps={{ref: input => this.titleInput = input}}
            required 
        />
    );
}

At this point ref object has no benefits. Ref callback can be used with useState instead, state update function is callback that receives new state as an argument and it doesn't cause additional updates if it receives the same state (DOM element):


const [anchorEl, setAnchorEl] = useState<HTMLDivElement>(null);

...

   { anchorEl && <Popover
        id="simple-popper"
        open={open}
        anchorEl={anchorEl}
        ...
   }
   <div ref={setAnchorEl} >

(1) Use the return value from ReactDOM.render:

(2) Use React.createElement:

(3) Use refs:


var element = ReactDOM.render(<MyComponent />, myDomElementContainer);


var element = React.createElement(MyComponent);
ReactDOM.render(element);


var element;
ReactDOM.render(<MyComponent ref={el => element = el } />, myDomElementContainer);

You can use refs to get the value of the tshirt input field and then call the callback function passed to FormButton component in the action prop.


var FormButton = React.createClass({ 
getInitialState: function() {
    return {'submitted': false};
},

handleSubmit: function(e) {
    e.preventDefault();
    var tshirt = this.refs.tshirt.value;
    this.setState({submitted: true }, function() {
      this.props.action(tshirt);
    });
},
render: function() {
    if (this.state.submitted) {
        return <Extention/>;
    }
    else {
        return (
            <form role="form" onSubmit={this.handleSubmit}>
                <input type="text" ref="tshirt" />
                <input type="submit" value="submit" />
            </form> 
        );
    }
}
});

You can achieve this with ref callback in React.


resetInput = () => {
  this.setState({ search: '' });
  if (this.textInput) this.textInput.focus();
}

<div className="storyboard-search-box clearfix">
  <input ref={ref => { this.textInput = ref }} type="text" placeholder="Search..." value={this.state.search} onChange={this.searchBoard} />
  <button className="clear-search-button">
    <img src={clearIcon} alt="clear button" title="Clear All" onClick={this.resetInput}/>
  </button>
</div>

You could do something like this using the ref functionality of react. See:


import React, { Component } from "react";

class Temp extends Component {
  state = {
    dataValue: ""
  };

  constructor(props) {
    super(props);
  }

  getAttributeValue = element => {
    this.setState({ dataValue: element.dataset.value });
  };

  render() {
    const { value } = this.props;
    const { dataValue } = this.state;
    return (
      <div
        ref={this.getAttributeValue}
        className={value === dataValue ? "foo" : ""}
        data-value="bar1"
      >
        {dataValue} Test
      </div>
    );
  }
}

export default Temp;

From this answer and this article we can learn that the callback you provided to the ref attribute will be executed when the component mounts. However, you are immediately passing it to a child component during the render process, thus it is undefined because the component has not mounted yet. To remedy this, you can probably have a state that keeps track of the refs, then on-mount: assign the refs to the state so that the child component can re-render with the correct ref assigned to its prop.


state = {
  videoRef: ""
};

componentDidMount(){
  this.setState({
    videoRef: this.video
  })
}

<video ref={(instance) => (this.video = instance)}>
...

<Child video={this.state.videoRef} />

Recommend

React Refs and the DOM Accessing Refs Refs and Function Components

React Refs and the DOM Accessing Refs Adding a Ref to a Class Component

React Refs and the DOM Accessing Refs Adding a Ref to a DOM Element

React Refs and the DOM Accessing Refs

React Refs and the DOM Creating Refs

File Structure Is there a recommended way to structure React projects? Grouping by file type

File Structure Is there a recommended way to structure React projects? Grouping by features or routes

Glossary of React Terms Components props.children

Glossary of React Terms Components props

Glossary of React Terms Components

Glossary of React Terms Elements

Glossary of React Terms JSX

React Code-Splitting Named Exports

React Code-Splitting Route-based code splitting

Code-Splitting React.lazy Error boundaries

Code-Splitting React.lazy

React Code-Splitting import()

React Code-Splitting Bundling Example

React Test Utilities Other Utilities Simulate

React Test Utilities Reference renderIntoDocument()

React Test Utilities Reference findRenderedComponentWithType()

React Test Utilities Reference scryRenderedComponentsWithType()

React Test Utilities Reference findRenderedDOMComponentWithTag()

React Test Utilities Reference scryRenderedDOMComponentsWithTag()

React Test Utilities Reference findRenderedDOMComponentWithClass()

React Test Utilities Reference scryRenderedDOMComponentsWithClass()

React Test Utilities Reference findAllInRenderedTree()

React Test Utilities Reference isCompositeComponentWithType()

React Test Utilities Reference isCompositeComponent()

React Test Utilities Reference isDOMComponent()

React Test Utilities Reference isElementOfType()

React Test Utilities Reference isElement()

React Test Utilities Reference mockComponent()

React Test Utilities Reference act()

React Test Utilities

React Profiler API onRender Callback

React Profiler API Usage

React AJAX and APIs Example: Using AJAX results to set local state

React.Component Class Properties defaultProps

React.Component Other APIs forceUpdate()

React.Component Other APIs setState()

React.Component Reference UNSAFE_componentWillUpdate()

React.Component Reference UNSAFE_componentWillReceiveProps()

React.Component Reference UNSAFE_componentWillMount()

React.Component Reference componentDidCatch()

React.Component Reference static getDerivedStateFromError()

React.Component Reference getSnapshotBeforeUpdate()

React.Component Reference static getDerivedStateFromProps()

React.Component Reference shouldComponentUpdate()

React.Component Reference componentWillUnmount()

React.Component Reference componentDidUpdate()

React.Component Reference componentDidMount()

React.Component Reference constructor()

React.Component Reference render()

React.Component Overview

Render Props Caveats Be careful when using Render Props with React.PureComponent

React Render Props Using Props Other Than render

React Render Props Use Render Props for Cross-Cutting Concerns

React Render Props

React Hooks FAQ Performance Optimizations How to read an often-changing value from useCallback?

React Hooks FAQ Performance Optimizations How to avoid passing callbacks down?