React ref binding results in: TypeError: Cannot read property 'focus' of null












0














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?










share|improve this question
























  • do you get this in browser, in unit test or maybe SSR?
    – skyboyer
    Nov 21 '18 at 21:14










  • In browser, specifically Chrome Version 70.0.3538.77
    – Sean Dezoysa
    Nov 21 '18 at 21:18
















0














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?










share|improve this question
























  • do you get this in browser, in unit test or maybe SSR?
    – skyboyer
    Nov 21 '18 at 21:14










  • In browser, specifically Chrome Version 70.0.3538.77
    – Sean Dezoysa
    Nov 21 '18 at 21:18














0












0








0







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?










share|improve this question















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?







reactjs semantic-ui-react






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 19:21









Alexander Fedyashov

2,55311031




2,55311031










asked Nov 21 '18 at 21:10









Sean DezoysaSean Dezoysa

176113




176113












  • do you get this in browser, in unit test or maybe SSR?
    – skyboyer
    Nov 21 '18 at 21:14










  • In browser, specifically Chrome Version 70.0.3538.77
    – Sean Dezoysa
    Nov 21 '18 at 21:18


















  • do you get this in browser, in unit test or maybe SSR?
    – skyboyer
    Nov 21 '18 at 21:14










  • In browser, specifically Chrome Version 70.0.3538.77
    – Sean Dezoysa
    Nov 21 '18 at 21:18
















do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14




do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14












In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18




In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18












1 Answer
1






active

oldest

votes


















0














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






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420516%2freact-ref-binding-results-in-typeerror-cannot-read-property-focus-of-null%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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






    share|improve this answer


























      0














      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






      share|improve this answer
























        0












        0








        0






        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 '18 at 18:42









        Sean DezoysaSean Dezoysa

        176113




        176113






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420516%2freact-ref-binding-results-in-typeerror-cannot-read-property-focus-of-null%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            TypeError: fit_transform() missing 1 required positional argument: 'X'