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?](https://stackoverflow.com/questions/24147331/whats-the-right-way-to-pass-form-element-state-to-sibling-parent-elements) — Guy Incognito, Nov 19 '20 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, Nov 19 '20 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, Nov 19 '20 at 10:23
If so it should return `props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')`. But this function also gets `value`. What it should do with it? If nothing, then remove it - `export const V = () => (...` — Mosh Feu, Nov 19 '20 at 10:26
The function syntax is largely academic, it's never going to work anyway. `props` is available only inside the component and you can't export anything from there. — Guy Incognito, Nov 19 '20 at 10:32
@GuyIncognito do you have a suggestion to have the ability to use it in another component ? — MARYAM, Nov 19 '20 at 10:37
Pass the same prop to all components that use it, then export a generic function from somewhere that takes the prop as a parameter. `export const V = (value) => value === '1' ? '10' : value.replace('0.','')` and then `V(props.slices[2].transform)` wherever you need it. — Guy Incognito, Nov 19 '20 at 10:40

DevLoverUmar · Accepted Answer · 2020-11-19T17:24:36.853

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 ? — MARYAM, Nov 19 '20 at 17:16

getting error when exporting variable in reactjs

1 Answers1

Linked