I want to pass a value from file A to a function in file B that changes with slider input. I am trying to do this by passing the value as a prop.
I am currently getting the error "Expected 1 arguments, but got 0." when I call GraphArrayFunction() in file B because I am not passing a prop through the function. How would I pass a prop through the function if I want the prop to be able to be changed? File A:
const test = Number(rangeValue);
GraphArrayFunction({test});
File B:
interface MainProps {
test: number
}
export const GraphArrayFunction = (props: MainProps) => {
const {test} = props;
let i = test
const j = 1;
const graphArray = [];
//let user change i
if (i > 1) {
while (j < i + 1){
graphArray.push(randomNumber());
j++;
}
}
return graphArray;
}
const Graph = () => {
return (
<Wrapper>
<GraphOutline>
{GraphArrayFunction().map((numbers, index) =>
<HeightBars height={numbers} />)}
</GraphOutline>
</Wrapper>
)
}
export default Graph
File A:
const test = Number(rangeValue);
// Here you are passing {test} as an argument of function so it will work here.
GraphArrayFunction({test});
File B:
interface MainProps {
test: number
}
export const GraphArrayFunction = (props) => {
const {test} = props;
let i = test
const j = 1;
const graphArray = [];
//let user change i
if (i > 1) {
while (j < i + 1){
graphArray.push(randomNumber());
j++;
}
}
return graphArray;
}
// Error you are getting from this Graph function as you are calling above function here as well
const Graph = () => {
return (
<Wrapper>
<GraphOutline>
// here you are not passing any argument. I have passes test:15 and your // function will use this. And that's why you are getting error that function // should have at least one argument
{GraphArrayFunction({test:15}).map((numbers, index) =>
<HeightBars height={numbers} />)}
</GraphOutline>
</Wrapper>
)
}
export default Graph