getting error when exporting variable in reactjs

Question

hello i have this component in react js :

import React from 'react';
import './Questions.css';

const Questions = (props) => {
    

    let questions = Object.keys(props.slices).map((questionKey, i) => (
        <li key={i}>
            <p>{props.slices[questionKey].question}</p>
            <div className="Answer">
                <input
                onChange={props.selectScore(questionKey)} 
                type="range" 
                min="1" 
                max="10" 
                value={props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')} 
                className="rangeInput"
                style={{background: props.slices[questionKey].fill}} />
                <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div>
                   <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    {/* <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div> */}
                    {props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')}
                  </span>
                </span>

 
            </div>

        </li>
        
    ));
    
    return (
        <>
           
            My variable = {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}

            {questions}
        </>
    );

    
    
}


export default Questions;

i need to export this line which is in the return function: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')} as a variable to use it in another component .
so i did this :

export const V = (value) => (
  value === {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}
)

but i'm getting this error : Unexpected token, expected "," (47:20)
could someone help me to export the variable . thank you in advance

Apart from syntax, you can't (and shouldn't) pass props data to other components that way. See What's the right way to pass form element state to sibling/parent elements? — Guy Incognito
– Guy Incognito, Commented Nov 19, 2020 at 10:16
Nope. V (upper case) is a function name which throws an error. In order to try to help you fixing the syntax, I need to understand what's its logic. — Mosh Feu
– Mosh Feu, Commented Nov 19, 2020 at 10:20
@MoshFeu the return of this {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')} is a number that I want to display in a page — MARYAM
– MARYAM, Commented Nov 19, 2020 at 10:23

DevLoverUmar · Accepted Answer · 2020-11-19 17:24:36Z

As you wrote

i need to export this line which is in the return function: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')} as a variable to use it in another component

I assume, you don't want to render anything in this component rather just want to return some computed values? Right? If Yes, then you shoould simple return the values like this.

import React from 'react';
import './Questions.css';

const Questions = (props) => {
    
    // better to use const instead of let, if you don't need to modify a variable...
    const questions = Object.keys(props.slices).map((questionKey, i) => (
        <li key={i}>
            <p>{props.slices[questionKey].question}</p>
            <div className="Answer">
                <input
                onChange={props.selectScore(questionKey)} 
                type="range" 
                min="1" 
                max="10" 
                value={props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')} 
                className="rangeInput"
                style={{background: props.slices[questionKey].fill}} />
                <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div>
                   <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    {/* <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div> */}
                    {props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')}
                  </span>
                </span>

 
            </div>

        </li>
        
    ));
    
    const myVar = props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','');

    return {myVar,questions};    
    
}


export default Questions;

And if you return the values like this return (<> ... some JSX ... </>); then it will be some rendered JSX, which I think you can't simple export as variable to be used by another component.

Update

To use myVar in another component do this

import Questions from 'questions-file-name';

const selectScore= (key)=>{
// do something with score using key
}

const {myVar,questions} = Questions(slices,selectScore);

thank you sir, now if i want to use myVar in another component i think i should just import this component and write {{myVar}} in the div that i want to show ?

Collectives™ on Stack Overflow

getting error when exporting variable in reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related