Error code Parsing error: Unexpected token, expected ","?

Question

I’m having a hard time with mine JavaScript, the given error is:

./src/components_basics/Aleatorio.jsx Line 5:56: Parsing error: Unexpected token, expected "," 3 | 4 | export default (props) => { 5 | const Aleatorio = parseint (Math.Random () * {props.max} + {props.min}); | ^ 6 | Return ( 7 | 8 |

The random value is {Random}

Being my code word:

import React from 'react'


export default (props) => {
    const Aleatorio = parseInt (Math.random () * {props.max} + {props.min});
    return (
        <div>
        <h2> O valor aleatório é {Aleatorio}</h2>
        </div>
    );
}

Answer 1

In the resolution of a javascript with the return for a variable need not use {} as shown in the minimum example below:

function Item(props) {
    const aleatorio = 
        parseInt (Math.random () * props.max + props.min);
    return (
        <div>
          <h2> O valor aleatório é {aleatorio}</h2>
        </div>
    );
}

function App() {  
  return (
    <Item max={10} min={14} />
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

can also be directly passed the full operation inside the keys as follows:

function Item(props) {
    
    return (
        <div>
          <h2> O valor aleatório é {parseInt (Math.random () * props.max + props.min)}</h2>
        </div>
    );
}

function App() {  
  return (
    <Item max={10} min={14} />
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

then, was used in the wrong way and therefore the error shown in the question on the line and the keys as problem. The keys {} has several ways of being used even to unstructure objects that is already another concept.

Answer 2

In short, you’re trying to create an object and pass it the property of another object. That doesn’t make much sense, because it will be an object with an empty property, and you’re trying to multiply an object by a number and add to another object. You see how confusing it is?

The structure of creating an object is to place identifiers and properties of those identifiers between keys ({propriedade: props.max}), and, if you try to multiply this object (instead of its parameters), you will generate errors.

In short, let’s say props.max = 45. In that case, you’re doing the following:

{"45"}

And this cannot (or at least should not) be multiplied by anything else in this specific context (let us ignore for now all the kinds of operations we can do with strings, objects and concatenations). So you don’t need to create an object, you need to collect the value from within an existing object.

We corrected the code by removing the keys:

export default (props) => {
    const Aleatorio = parseInt (Math.random () * props.max + props.min);
    return (
        <div>
            <h2> O valor aleatório é {Aleatorio}</h2>
        </div>
    );
}

If you want to better understand the concept, I recommend reading a little about initialization of objects with Javascript.

Solution link in Stackblitz