findDOMNode() and getDOMNode() are not a functions

Question

I read through a simillar topic where the same error was discussed, however that did not solve my problem. I have a simple app component:

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

class SearchBox extends Component {

    render() {
        return (
            <form onSubmit = {this.handleClick.bind(this)}>
                <input
                    ref="search"
                    type="text" 
                    placeholder="username..."/>

                <input
                    type="submit"
                    value="Search" />
            </form>
        );
    }

    handleClick(e) {
        e.preventDefault();
        let username = this.refs.search.findDOMNode().value;
        this.props.fetchUser(username);
        this.refs.search.findDOMNode().value = '';
    }

    fetchUser(username) {
        let url = `https://api.github.com/users/${username}`;

        this.fetchApi(url);
      }

    fetchApi(url) {
      fetch(url)
        .then((res) => res.json())
        .then((data) => {

          this.setState({
            username: data.login,
            image: data.avatar_url,
            name: data.name,
            location: data.location,
            followers: data.followers,
            following: data.following
          })
        })
    }
}

export default SearchBox;

After rendering the component, I get the following error:

TypeError: this.refs.search.findDOMNode is not a function
  20 | 
  21 | handleClick(e) {
  22 |  e.preventDefault();
> 23 |     let username = this.refs.search.findDOMNode().value;
  24 |     
  25 |     this.props.fetchUser(username);
  26 |      this.refs.search.findDOMNode().value = '';

I tried using the findDOMNode() and also getDOMNode() methods, but without luck. Both of them cause the same error to pop up. Any ideas?

Answer 1

.getDOMNode is deprecated as of React version 0.13 and findDOMNode is no longer necessary

As per this Github issue, Dan Abramov, talks about a possible removal of findDOMNode through the use of ref callbacks

Also with the latest version, the following can be used

class SearchBox extends Component {

    render() {
        return (
            <form onSubmit = {this.handleClick.bind(this)}>
                <input
                    ref={(ref) => this.search = ref}
                    type="text" 
                    placeholder="username..."/>

                <input
                    type="submit"
                    value="Search" />
            </form>
        );
    }

    handleClick(e) {
        e.preventDefault();
        let username = this.search.value;
        this.props.fetchUser(username);
        this.refs.search.findDOMNode().value = '';
    }

Also read this answer on StackOverflow for more information on using ref callbacks instead of string refs

Answer 2

For what I can understand from your code, all you want to do is access the value to send it in a fetch request and then set an empty string. However, the way you are doing it is not the react way, you should use a controlled component by using the state to keep the updated value.

class SearchBox extends Component {
  state = {
    username: '',
  };

  render() {
    const { username } = this.state;
    return (
        <form onSubmit = {this.handleClick.bind(this)}>
            <input
                value={username}
                type="text" 
                onChange={this.setUsername}
                placeholder="username..."/>

            <input
                type="submit"
                value="Search" />
        </form>
    );
  }

  setUsername = (event) => this.setState({ username: event.target.value });

  handleClick(e) {
    e.preventDefault();
    this.props.fetchUser(this.state.username);
    this.setState({ username: '' });
  }
}

as you type, the state will get updated, then when clicking the button you can get the username from the state. Resetting the state will automatically set the value of the input as an empty string.