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 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?

@MiFreidgeim SO-stop being evil 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

@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

@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.

https://facebook.github.io/react/docs/refs-and-the-dom.html

@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?

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

You can replace

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

by

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?

Related Questions

Sponsored Content

93 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6253476 View
  • 7809 Score
  • 93 Answer
  • Tags:   javascript arrays

32 Answered Questions

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

13 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
  • 761218 View
  • 1506 Score
  • 13 Answer
  • Tags:   javascript arrays

26 Answered Questions

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

23 Answered Questions

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

  • 2015-06-25 11:21:52
  • Thomas Johansen
  • 226773 View
  • 791 Score
  • 23 Answer
  • Tags:   javascript reactjs

78 Answered Questions

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

56 Answered Questions

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

14 Answered Questions

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

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1067245 View
  • 1633 Score
  • 14 Answer
  • Tags:   javascript jquery html

10 Answered Questions

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

16 Answered Questions

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

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

Sponsored Content