score:0
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);
Source: stackoverflow.com
Related Query
- getting error when exporting variable in reactjs
- Getting error when I try to define pointerEvent property within ReactJs application
- Why am I getting "TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function" error when using reactjs hooks?
- Getting error in Reactjs when using map to display JSON data?
- Getting "JSX element type 'App' does not have any construct or call signatures." ts(2604) error when exporting array of JSX Element
- Getting CORS error in ReactJS app when attempting to execute localhost API
- Reactjs app building successfully when deploying with Heroku but still getting Application Error
- Getting error "Unhandled Rejection (TypeError): api_call4.json is not a function" even when error is caught in reactjs
- React.js when using non state variable Getting error as A component is changing an uncontrolled input of type text to be controlled
- Why am i getting undefined when accessing a closure variable in ReactJS
- ReactJs lazy when trying to use lazy loading, getting 'window; is not defined error
- Getting these error when trying to test component in ReactJs
- Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
- I am getting error in console "You need to enable JavaScript to run this app." reactjs
- Getting an "Access Denied" error when I reload my React app on AWS Amplify
- CSS Emotion Library - Getting css props error when using css prop
- How to avoid getting error 'localStorage is not defined' on server in ReactJS isomorphic app?
- Why is IE8 getting a script error when using Facebook's React.js
- Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify
- Why I am getting this error message when I run react js project first time in my system?
- Getting error when creating React HOC in Typescript
- Objects are not valid as a React child getting error when adding div?
- moment-timezone.js – Getting Error When Running in Jest Test
- Getting net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 when consuming event-stream using EventSource in ReactJs
- Getting error when using FormattedMessage inside a module: Error: [React Intl] Could not find required `intl` object
- getting graphQL error when compiling
- Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'
- I keep getting NotImplementedError error when starting django server
- reactjs and Facebook API: Getting error 'FB' is not defined no-undef
- Getting error when using type "React.ReactNode" to children. Which type should I use?
More Query from same tag
- Property 'token' is missing in type 'PropsWithChildren<WithUrqlProps>' but required in type '{ token: string; }'
- VS Code Absolute Paths auto-complete & click-to-see-definition using js/tsconfig.json
- Extracting underlying data via RSelenium with embedded leaflet svg, and more
- How to update list of items with Infinite scroll when new item added
- Page not found is displayed on all my pages - React Router
- socket emits multiple times to same client socketio
- Add accessibility and validation to a search form
- ReactJS: value of the object is undefined
- Adding query parameters on form submission - React router 4
- Getting a RangeError: Invalid Time Value when using React datepicker
- Update React context from child component
- Unclear benefit of "setLoading" state in React axios
- React Draft.js Wysiwyg: How to programmatically insert text at the cursor location?
- react-moment moment component with duration props outputs 0 days, 0 weeks etc
- React Router v5 nested routes not found
- Formik and yup validation on string type using latest release 0.29.3
- How to update components created inside a JSX.Element?
- Using createSelector with useSelector and a selector from another file whats the correct syntax?
- increment/decrement button issue in react app
- how to map through API data when each data array is different
- React js read data after loading
- How can I extract key values form my JSON dictionary?
- Add mouse hover effects into style
- React: deletion of component from an array of components
- Why is Id only getting saved in database and no other data?
- How to call navigate inside Redux Toolkit's actions in React js
- TypeError: _mappings__WEBPACK_IMPORTED_MODULE_1__.a[iconName] is not a function
- Test login component with react hooks,
- How to return variables from a component using function as a child component?
- Create React App not installing, showing an error and aborting installation