How to pass variables and functions to components in react? - reactjs

Question

I want to create a component and call each instance with individual values. Each component (<NewRanger .../>) should also use a different handleChangeFunction. I pass this as follows: handleChangeFunction={handleChangeEm100} where handleChangeEm100 is the individual name of the function. This should then be taken over within the component as onChange={{handleChangeFunction}}. But somehow it crashes for me without any concrete error. Am I doing something conceptually wrong here?
function Check() {
const [valueEm100, setValueEm100] = React.useState([96, 99]);
const handleChangeEm100 = (event, newValue, activeThumb) => {
..
};
function NewRanger({valueName, valueRange, valueNameRange, handleChangeFunction,
steps, minV, maxV}) {
return (
<>
<div className='Text-EM-main'>
<div className="Text-EM-0">
{valueName}:
</div>
<div className="Text-EM-1">
{{valueRange}[0]}
</div>
<div className="Text-EM-2">
<Slider
getAriaLabel={() => valueNameRange}
value={{valueRange}}
onChange={{handleChangeFunction}}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
disableSwap
step={{steps}}
marks
min={{minV}}
max={{maxV}}
/>
</div>
<div className="Text-EM-3">
{{valueRange}[1]}
</div>
</div>
</>
)
}
return (
<>
<NewRanger
valueName={"EM100"}
valueRange={valueEm100}
valueNameRange={'em100 range'}
handleChangeFunction={handleChangeEm100}
steps={1} minV={90} maxV={110}/>
</>
)

Answer 1

First of all never define you components in other components. Move NewRanger to outside of the Check component. Also you are using extra {} in your code. Here is the updated code:
function NewRanger({valueName, valueRange, valueNameRange, handleChangeFunction,
steps, minV, maxV}) {
return (
<>
<div className='Text-EM-main'>
<div className="Text-EM-0">
{valueName}:
</div>
<div className="Text-EM-1">
{valueRange[0]}
</div>
<div className="Text-EM-2">
<Slider
getAriaLabel={() => valueNameRange}
value={valueRange}
onChange={handleChangeFunction}
valueLabelDisplay="auto"
getAriaValueText={valuetext}
disableSwap
step={steps}
marks
min={minV}
max={maxV}
/>
</div>
<div className="Text-EM-3">
{valueRange[1]}
</div>
</div>
</>
)
}
function Check() {
const [valueEm100, setValueEm100] = React.useState([96, 99]);
const handleChangeEm100 = (event, newValue, activeThumb) => {
..
};
return (
<>
<NewRanger
valueName={"EM100"}
valueRange={valueEm100}
valueNameRange={'em100 range'}
handleChangeFunction={handleChangeEm100}
steps={1} minV={90} maxV={110}/>
</>
)