By user504909


2016-06-29 08:05:16 8 Comments

How do I select certain bars in react.js?

This is my code:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

I want to use this React component:

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

I want to execute the handleClick10 function and perform the operation for my selected progressbar. But the result I get is:

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

How do I select the certain Element in react.js?

4 comments

@Shubham Khatri 2016-06-29 08:16:13

You can do that by specifying the ref

EDIT: In react v16.8.0 with functional component, you can define a ref with useRef. Note that when you specify a ref on a functional component, you need to use React.forwardRef on it to forward the ref to the DOM element of use useImperativeHandle to to expose certain functions from within the functional component

Ex:

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

EDIT:

In React 16.3+, use React.createRef() to create your ref:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

In order to access the element, use:

const node = this.myRef.current;

DOC for using React.createRef()


EDIT

However facebook advises against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases.

From the docs:

Legacy API: String Refs

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

A recommended way for React 16.2 and earlier is to use the callback pattern:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC for using callback


Even older versions of react defined refs using string like below

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

In order to get the element just do

var object = this.refs.Progress1;

Remember to use this inside an arrow function block like:

print = () => {
  var object = this.refs.Progress1;  
}

and so on...

@Dmitry 2017-02-10 16:18:42

Facebook advises against this approach. See here facebook.github.io/react/docs/refs-and-the-dom.html

@Shubham Khatri 2017-02-13 03:56:42

@dmitrymar As I can see the above page is written for v15.4.2 onwards and I guess, this was not there earlier when I wrote the answer. Anyways edited the answer with the correct approach

@Shubham Khatri 2018-04-19 05:32:54

@MattSidor, thanks for the edit, you saved me some time :-)

@akshay kishore 2019-05-13 11:53:50

Um, question what if I can't access it via the "this", like what if the component I need is an instance of another class? (i.e another child react component within the parent component)

@Shubham Khatri 2019-05-13 12:26:31

@akshaykishore You would need to pass the ref down using another name say innerRef and pass it to desired component

@akshay kishore 2019-05-14 13:28:57

@ShubhamKhatri, I meant what if the parent needs to access the refs in the child component

@blindguy 2019-08-05 17:14:55

Both of the example you provide are acceptable for 16.3 and above. The only version issues I can find around this release have to do with ref forwarding method (not shown in this example).

@Sagar Kodte 2019-09-17 13:12:24

How can I do this with dynamically created element?

@Michael Freidgeim 2019-12-09 07:05:02

Will you consider to move current React 16.3+ part of the answer to the top ?

@Shubham Khatri 2019-12-09 07:07:22

@MiFreidgeimSO-stopbeingevil, Updated my answer. Thanks for the suggestion

@alexr89 2020-02-05 11:18:45

This method would only work via a parent/child relationship though wouldnt it? You can access any element on the page with document.getelementbyid, you cant with this method described

@Piyush.kapoor 2016-06-29 08:20:58

You can replace

document.getElementById(this.state.baction).addPrecent(10);

with

this.refs[this.state.baction].addPrecent(10);


  <Progressbar completed={25} ref="Progress1" id="Progress1"/>

@Sagar Kodte 2019-09-17 13:12:30

How can I do this with dynamically created element?

@EQuimper 2016-06-29 08:19:14

For getting the element in react you need to use ref and inside the function you can use the ReactDOM.findDOMNode method.

But what I like to do more is to call the ref right inside the event

<input type="text" ref={ref => this.myTextInput = ref} />

This is some good link to help you figure out.

@Sam Parmenter 2017-02-12 10:42:32

This is the correct way to do this. This adds a reference to the element on the object/class to that you can simply use this.myTextInput to access.

@Sagar Kodte 2019-09-17 13:12:27

How can I do this with dynamically created element?

@James Poulose 2020-02-23 04:19:32

Calling React.findDOMNode gives me react__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function

@Limpuls 2020-03-08 23:15:02

@JamesPoulose make sure you are not running in strict mode, because react won't allow you to use React.findDOMNode in strict mode.

@Nikhil Kamani 2019-10-12 08:22:08

Since React uses JSX code to create an HTML we cannot refer dom using regulation methods like documment.querySelector or getElementById.

Instead we can use React ref system to access and manipulate Dom as shown in below example:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

@adam tropp 2020-01-22 13:44:15

This is not true. You can add an id to the img element, grab it using document.getElementById, and in most cases, it will work fine. It may cause problems/make your code harder to debug, but react/jsx donlt make it so that you CANT use native Dom methods

Related Questions

Sponsored Content

39 Answered Questions

[SOLVED] What is the difference between React Native and React?

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6931445 View
  • 8494 Score
  • 96 Answer
  • Tags:   javascript arrays

80 Answered Questions

[SOLVED] How do I detect a click outside an element?

11 Answered Questions

[SOLVED] How can I add new array elements at the beginning of an array in Javascript?

  • 2011-11-10 00:35:22
  • Moon
  • 832944 View
  • 1613 Score
  • 11 Answer
  • Tags:   javascript arrays

15 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1131720 View
  • 1710 Score
  • 15 Answer
  • Tags:   javascript jquery html

26 Answered Questions

[SOLVED] What do these three dots in React do?

  • 2015-06-25 11:21:52
  • Thomas Johansen
  • 285685 View
  • 935 Score
  • 26 Answer
  • Tags:   javascript reactjs

16 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 671139 View
  • 1321 Score
  • 16 Answer
  • Tags:   javascript dom

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

11 Answered Questions

[SOLVED] How to access the correct `this` inside a callback?

26 Answered Questions

[SOLVED] How can I tell if a DOM element is visible in the current viewport?

Sponsored Content