how to correctly setState in the reactjs function












0















In my case, I want to change the image url to base64 file using the "base64-img" library.



I intend to save the results of converting the file into a state. I tried saving it to a variable also failed. I wrote the script as follows:



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


I get an error Uncaught TypeError: Cannot read property 'setState' of undefined



I try to set the value to a variable then console_log works well, but the value cannot be accessed from outside.



let b64;

base64Img.requestBase64('url_image', function(err, res, body) {

  b64 = body;

  console.log(b64);

});


I want to use the value b64 outside of the function. Thanks






reactjs base64







share|improve this question


















  • 2





    Possible duplicate of How to access the correct `this` inside a callback?

    – Boy With Silver Wings
    Nov 26 '18 at 5:02











  • Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:06











  • Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

    – Boy With Silver Wings
    Nov 26 '18 at 5:08


















0















In my case, I want to change the image url to base64 file using the "base64-img" library.



I intend to save the results of converting the file into a state. I tried saving it to a variable also failed. I wrote the script as follows:



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


I get an error Uncaught TypeError: Cannot read property 'setState' of undefined



I try to set the value to a variable then console_log works well, but the value cannot be accessed from outside.



let b64;

base64Img.requestBase64('url_image', function(err, res, body) {

  b64 = body;

  console.log(b64);

});


I want to use the value b64 outside of the function. Thanks






reactjs base64







share|improve this question


















  • 2





    Possible duplicate of How to access the correct `this` inside a callback?

    – Boy With Silver Wings
    Nov 26 '18 at 5:02











  • Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:06











  • Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

    – Boy With Silver Wings
    Nov 26 '18 at 5:08
















0












0








0








In my case, I want to change the image url to base64 file using the "base64-img" library.



I intend to save the results of converting the file into a state. I tried saving it to a variable also failed. I wrote the script as follows:



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


I get an error Uncaught TypeError: Cannot read property 'setState' of undefined



I try to set the value to a variable then console_log works well, but the value cannot be accessed from outside.



let b64;

base64Img.requestBase64('url_image', function(err, res, body) {

  b64 = body;

  console.log(b64);

});


I want to use the value b64 outside of the function. Thanks






reactjs base64







share|improve this question














In my case, I want to change the image url to base64 file using the "base64-img" library.



I intend to save the results of converting the file into a state. I tried saving it to a variable also failed. I wrote the script as follows:



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


I get an error Uncaught TypeError: Cannot read property 'setState' of undefined



I try to set the value to a variable then console_log works well, but the value cannot be accessed from outside.



let b64;

base64Img.requestBase64('url_image', function(err, res, body) {

  b64 = body;

  console.log(b64);

});


I want to use the value b64 outside of the function. Thanks






reactjs base64




reactjs base64






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 26 '18 at 5:00









Wisnu Pramono E.SWisnu Pramono E.S

309




309








  • 2





    Possible duplicate of How to access the correct `this` inside a callback?

    – Boy With Silver Wings
    Nov 26 '18 at 5:02











  • Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:06











  • Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

    – Boy With Silver Wings
    Nov 26 '18 at 5:08
















  • 2





    Possible duplicate of How to access the correct `this` inside a callback?

    – Boy With Silver Wings
    Nov 26 '18 at 5:02











  • Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:06











  • Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

    – Boy With Silver Wings
    Nov 26 '18 at 5:08










2




2





Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5:02





Possible duplicate of How to access the correct `this` inside a callback?

– Boy With Silver Wings
Nov 26 '18 at 5:02













Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

– Wisnu Pramono E.S
Nov 26 '18 at 5:06





Oh maybe yes for using 'this', I will read the link that you gave. But how can I access the variable that I filled with the results of the function. I did not successfully access the variable. Are there other ways that I can use other than my method above?

– Wisnu Pramono E.S
Nov 26 '18 at 5:06













Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

– Boy With Silver Wings
Nov 26 '18 at 5:08







Use an arrow function in place of your regular function and setState should work. If you do not want to set it to state, then a class variable in this.b64 could also do the trick

– Boy With Silver Wings
Nov 26 '18 at 5:08














2 Answers
2






active

oldest

votes


















1














You used



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


Here this will indicate the function instance, so that that instance won't contain setState method



So I suggest to try to use like this



var base64Img = require('base64-img');

let _self = this;

base64Img.requestBase64('url_image', function(err, res, body) {

  _self.setState ({ b64:body });

});





share|improve this answer
























  • The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:20



















1














You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this



const base64Img = require('base64-img');

//convert image to base 64

convertImgtoBase64(imageUrl) {

    base64Img.requestBase64(imageUrl,(err, res, body) => {

       this.setState ({ b64:body });

    });

}


Like this



constructor(props){

    super(props);

    this.state = {

        b64: null

    };

    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);

    this.showBase64Value = this.showBase64Value.bind(this);

   }

   showBase64Value(){

      console.log(this.state.b64);

   }





share|improve this answer
























  • This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:55











  • Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

    – Arunkumar Palanippan
    Nov 26 '18 at 7:26











  • Thank you for the advice, I will try to explore more deeply

    – Wisnu Pramono E.S
    Nov 26 '18 at 7:37











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%2f53475013%2fhow-to-correctly-setstate-in-the-reactjs-function%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You used



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


Here this will indicate the function instance, so that that instance won't contain setState method



So I suggest to try to use like this



var base64Img = require('base64-img');

let _self = this;

base64Img.requestBase64('url_image', function(err, res, body) {

  _self.setState ({ b64:body });

});





share|improve this answer
























  • The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:20
















1














You used



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


Here this will indicate the function instance, so that that instance won't contain setState method



So I suggest to try to use like this



var base64Img = require('base64-img');

let _self = this;

base64Img.requestBase64('url_image', function(err, res, body) {

  _self.setState ({ b64:body });

});





share|improve this answer
























  • The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:20














1












1








1







You used



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


Here this will indicate the function instance, so that that instance won't contain setState method



So I suggest to try to use like this



var base64Img = require('base64-img');

let _self = this;

base64Img.requestBase64('url_image', function(err, res, body) {

  _self.setState ({ b64:body });

});





share|improve this answer













You used



var base64Img = require('base64-img');

base64Img.requestBase64('url_image', function(err, res, body) {

  this.setState ({ b64:body });

});


Here this will indicate the function instance, so that that instance won't contain setState method



So I suggest to try to use like this



var base64Img = require('base64-img');

let _self = this;

base64Img.requestBase64('url_image', function(err, res, body) {

  _self.setState ({ b64:body });

});






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 5:11









JinJin

9311323




9311323













  • The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:20



















  • The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:20

















The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

– Wisnu Pramono E.S
Nov 26 '18 at 5:20





The way you suggest is successful. But I can only access it from within the function, but if I access it from outside the function doesn't work. Maybe I need to make a promise or async await huh?

– Wisnu Pramono E.S
Nov 26 '18 at 5:20













1














You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this



const base64Img = require('base64-img');

//convert image to base 64

convertImgtoBase64(imageUrl) {

    base64Img.requestBase64(imageUrl,(err, res, body) => {

       this.setState ({ b64:body });

    });

}


Like this



constructor(props){

    super(props);

    this.state = {

        b64: null

    };

    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);

    this.showBase64Value = this.showBase64Value.bind(this);

   }

   showBase64Value(){

      console.log(this.state.b64);

   }





share|improve this answer
























  • This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:55











  • Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

    – Arunkumar Palanippan
    Nov 26 '18 at 7:26











  • Thank you for the advice, I will try to explore more deeply

    – Wisnu Pramono E.S
    Nov 26 '18 at 7:37
















1














You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this



const base64Img = require('base64-img');

//convert image to base 64

convertImgtoBase64(imageUrl) {

    base64Img.requestBase64(imageUrl,(err, res, body) => {

       this.setState ({ b64:body });

    });

}


Like this



constructor(props){

    super(props);

    this.state = {

        b64: null

    };

    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);

    this.showBase64Value = this.showBase64Value.bind(this);

   }

   showBase64Value(){

      console.log(this.state.b64);

   }





share|improve this answer
























  • This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:55











  • Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

    – Arunkumar Palanippan
    Nov 26 '18 at 7:26











  • Thank you for the advice, I will try to explore more deeply

    – Wisnu Pramono E.S
    Nov 26 '18 at 7:37














1












1








1







You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this



const base64Img = require('base64-img');

//convert image to base 64

convertImgtoBase64(imageUrl) {

    base64Img.requestBase64(imageUrl,(err, res, body) => {

       this.setState ({ b64:body });

    });

}


Like this



constructor(props){

    super(props);

    this.state = {

        b64: null

    };

    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);

    this.showBase64Value = this.showBase64Value.bind(this);

   }

   showBase64Value(){

      console.log(this.state.b64);

   }





share|improve this answer













You can use ES6 arrow function to call setState and to access b64 outside the function or in custom function, you can bind the function inside the constructor and access using this



const base64Img = require('base64-img');

//convert image to base 64

convertImgtoBase64(imageUrl) {

    base64Img.requestBase64(imageUrl,(err, res, body) => {

       this.setState ({ b64:body });

    });

}


Like this



constructor(props){

    super(props);

    this.state = {

        b64: null

    };

    this.convertImgtoBase64 = this.convertImgtoBase64.bind(this);

    this.showBase64Value = this.showBase64Value.bind(this);

   }

   showBase64Value(){

      console.log(this.state.b64);

   }






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 5:27









Arunkumar PalanippanArunkumar Palanippan

9318




9318













  • This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:55











  • Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

    – Arunkumar Palanippan
    Nov 26 '18 at 7:26











  • Thank you for the advice, I will try to explore more deeply

    – Wisnu Pramono E.S
    Nov 26 '18 at 7:37



















  • This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

    – Wisnu Pramono E.S
    Nov 26 '18 at 5:55











  • Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

    – Arunkumar Palanippan
    Nov 26 '18 at 7:26











  • Thank you for the advice, I will try to explore more deeply

    – Wisnu Pramono E.S
    Nov 26 '18 at 7:37

















This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5:55





This is close to what I want. One more thing, I want convertImgtoBase64 to finish the process and then showBase64Value is executed.

– Wisnu Pramono E.S
Nov 26 '18 at 5:55













Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

– Arunkumar Palanippan
Nov 26 '18 at 7:26





Since state is updated, componentDidUpdate and render will be called again and you can see the converted base64 value from the state.

– Arunkumar Palanippan
Nov 26 '18 at 7:26













Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37





Thank you for the advice, I will try to explore more deeply

– Wisnu Pramono E.S
Nov 26 '18 at 7:37


















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.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475013%2fhow-to-correctly-setstate-in-the-reactjs-function%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

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more