无法访问功能组件的函数内的道具

Question

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

Answer 1

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