score:0

Accepted answer

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); 


Related Query

More Query from same tag