Htykuut

I am able to copy the example in the React docs to create a ref and then target it on Code Sandbox, but for some reason I can't replicate it in a local project. I'm using react 16.6.3 which is the latest version.

TypeError: Cannot read property 'focus' of null

SelectDonation.save_donation_amount

src/components/SelectDonation.js:19

  16 | save_donation_amount () {

  17 |   

  18 |   // testing refs

> 19 |   this.customDonationInput.current.focus();

     | ^  20 |   

  21 |   // prevent pageload

  22 |   // grab the custom amount

Here is my component:

import React from "react";

import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';

import store from "../reducer";



export default class SelectDonation extends React.Component {

  constructor(props) {

    super(props);

    this.customDonationInput = React.createRef();

    this.save_donation_amount = this.save_donation_amount.bind(this);

  }



  save_donation_amount () {

    this.customDonationInput.current.focus();

  };



  render() {

    return (

        <Form>

            <Form.Input

              type='number'

              placeholder='Custom Amount'

              name='donation_amount'

              id='custom_amount'

              ref={this.customDonationInput}

              // value={store.donation_amount}

              defaultValue={store.donation_amount}

            />



            <Button

              primary

              onClick={

                this.save_donation_amount

              }>Next Step

            </Button>

        </Form>

    )

  }

}

From the error it seems the .current property isn't there. What could be the cause of this?

The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue