CODEWITHSUNDEEP
javascriptreactjs
NoosaMaan
NoosaMaan

Reputation: 159

Change number to string react

*** COMPLETE REACT/JS NOOB ***

My goal is to make a parameter to a react component, to a string from a number.

I want to be able to take for example 10 and turn it into 10px

Example:

const ProgressCircle = ({ progress, color }) => { // progress is a number

//const progressStr = progress.toString()
//const str = progress.toString();

console.log(progress);

progress.toString() does not work?

console.log(progress) prints 'Undefined'

How hard can it be to cast a number to a string? What am I doing wrong? Or is casting not something you can do in JS?

Upvotes: 1

Views: 4562

Answers (1)

PeterJames
PeterJames

Reputation: 1353

The function ProgressCircle is expecting an object as the argument, so you should pass in an object, and you should name the properties of the object you are passing in with the same names as the properties of the object in the argument.

There is no need to use toString() as you can just use the + operator to add px to a number, but you can use toString() if you want to.

const ProgressCircle = ( { progress, color } ) => { 

    console.log(progress, color);
    console.log(progress+"px");
    console.log(progress.toString()+"px");
}

ProgressCircle( { "progress" : 25, "color": "red" } );
ProgressCircle( { "color": "green", "progress" : 46 } );
//  ProgressCircle( { 25, "red" } );  // Uncaught SyntaxError: Unexpected number
//  ProgressCircle( { "number" : 25, "string": "red" } ); // undefined undefined undefinedpx

Upvotes: 2

Related Questions