Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
}
This code uses a ref to store a reference to a DOM node:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />        <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}      />
    );
  }
}

React doesnt work that way, youll need to use a ref: https://reactjs.org/docs/refs-and-the-dom.html



import React, { Component, createRef } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

const chart = createChart(twoC, {
  width: 1200,
  height: 600,
});

class Main extends Component {
  // Create the ref
  ref = createRef();
  
  componentDidMount() {
    // After the first render
    console.log(this.ref.current); // Gets the current HTML element thats rendered
  }

  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          // Set the ref on this element
          <div className="box twoC" id="twoCharts" ref={this.ref}></div>
        </div>
        <div className="charts">
          <div className="box three">3</div>
          <div className="box four">4</div>
        </div>
      </div>
    );
  }
}

export default Main;

You should use ref to select only the element that your ProgressCircle is creating:


import React, {
    Component
} from 'react';
import $ from 'jquery';
import './App.css';

class ProgressCircle extends Component {
    constructor(props) {
        super(props);
        // create a ref to store the textInput DOM element
        this.progressFillRef = React.createRef();
    }

    componentDidMount() {
        $('.enter').click(function() {
            setTimeout(function() {
                $(this.progressFillRef.current).animate({
                    "width": this.props.ability
                }, 1000);
            }.bind(this), 6000);
        }.bind(this));
    }
    render() {
        return (
            <div className = "progress" >
                <div className = "progressFill"ref = {this.progressFillRef} >
                </div>
            </div>
        );
    }
}

export default ProgressCircle;

Create a ref in the parent component and pass it to the wrapped one and use it as targets :


import React, { PureComponent } from "react";
import anime from "animejs/lib/anime.es.js";

function withAnimation(WrappedComponent) {
  return class extends PureComponent {
    constructor() {
      super();

      // create DOM reference
      this.target1 = React.createRef();
    }

    handleAnimation = () => {
      anime({
        targets: this.target1,
        translateY: [-30, 0],
        easing: "easeInOutQuad",
        duration: 2000
      });
    };

    componentWillMount() {
      this.handleAnimation();
    }

    setTarget = el => {
      this.target1 = el;
    };

    render() {
      return <WrappedComponent setTarget={this.setTarget} {...this.props} />;
    }
  };
}

const WrappedComponent = props => {
  return <div ref={el => props.setTarget(el)}>Animate me</div>;
};

export default withAnimation;

React ref will work here.


class SomeComp extends React.Component{

constructor(){
    this.carRef = React.createRef(); //create ref
}
  render(){
    return(
      <div>
        <App>
          <BannerComponent  carRef={this.carRef}/> //pass ref in Banner Component to attach it to required DOM.
          <CarouselComponent carRef={this.carRef}/> //pass ref to CarouselComponent  to use it
        </App>
      </div>
    )
  }
}

Also, following the React documentation, you need to create a ref to access the DOM node like in the code below:


class MenuCard extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
    script.async = false;
    script.innerHTML = JSON.stringify({
        "container_id": "tv-medium-widget",
        "symbols": [
            [
            "Bitcoin",
            "BITMEX:XBTUSD|1m"
            ],
            [
            "Ethereum",
            "BITMEX:ETHUSD|1m"
            ]
        ],
        "greyText": "Quotes by",
        "gridLineColor": "rgba(182, 182, 182, 0.65)",
        "fontColor": "rgba(0, 0, 0, 1)",
        "underLineColor": "rgba(60, 120, 216, 1)",
        "trendLineColor": "rgba(60, 120, 216, 1)",
        "width": "100%",
        "height": "100%",
        "locale": "en"
    })
    this.myRef.current.appendChild(script);
  }

  render() {
    return(
    <div className="tradingview-widget-container" ref={this.myRef}>
        <div className="tradingview-widget-container__widget"></div>    
    </div>
    );
  }
}

For your problem about creating a state or not, you can avoid it by, when submitting the form, reading each of the inputs value. Each input can be accessed using React ref propertie. But you'll have to bind each of the inputs:


<input type="text" ref={(input) => { this.textInput = input; }} />

Create a ref to be attached to a dom element


textareaRef = React.createRef();

// will use our ref to focus the element
focusTextarea = () => {
  this.textareaRef.current.focus();
}

handleSubmit = () => {
  const { selectorValues } = this.state;
  if (!selectorValues.length) {
    // call our focusTextarea function when selectorValues is empty
    this.focusTextarea();
    return;
  }
  this.setState({ submittedSelectorValues: selectorValues });
};

// attach our ref to Textarea
<Textarea ref={this.textareaRef} />

Recommend

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?

React Hooks FAQ Performance Optimizations Are Hooks slow because of creating functions in render?

React Hooks FAQ Performance Optimizations How to create expensive objects lazily?

React Hooks FAQ Performance Optimizations How to memoize calculations?