I am trying to use props inside function of functional props.
const Inputs = (props) => {
console.log(props.printFirstArray);
const FirstInputSet = () => {
console.log(props.printFirstArray)
}
}
First console.log is logging the value of printFirstArray, but second console.log inside FirstInputSet() function is not logging anything.
Edit: Minimal Code
const Inputs = (props) => {
const FirstInputSet = () => {
return (
<>
<div className="first input-set">
{props.printFirstArray}
</div>
</>
);
}
const renderFirstInputSet = () => {
if (props.firstInputValue)
return <FirstInputSet />
else
return null;
}
return (
<>
{renderFirstInputSet()}
</>
);
}
Neither props.printFirstArray nor props.printSecondArray is not returning anything
From your code, FirstInputSet is a new component and you aren't passing any props.
return <FirstInputSet />
Try to pass your props to the child component but I recommend keeping the child component out of parent component.
OR
If you meant to use FirstInputSet as a function, you can modify the code like below
return FirstInputSet();