React parent component props can't access using forwardRef props in child component-CodePudding

I have Child Component Like this.

Parent => Child

When I send props to my child component from the parent component. The prop can't access child components.

const Parent = () => {
    const [renderCount, setRenderCount] = useState(4);

    const renderCountHandler = () => {
        setRenderCount(renderCount   1);
    };

    return (
        <div>
           <Child renderCountHandler={renderCountHandler}/>
        </div>
    );
};


const Child = forwardRef((props, ref) => {

    //Can't access props.renderCountHandler Only props.children
    <div>{props.}</div>
});

I am a new student for reactjs. So I don't know much about it. If anyone can help me with this. It's a realy help for me to my studies.❤️

CodePudding user response：

Everything is ok in your code. I get the "renderCountHandler" props. See the sandbox

CodePudding user response：

You can pass state or method as props parent to child component.

Read more here components-and-props

Example:

const { forwardRef, useState } = React;

const Parent = () => {
  const [renderCount, setRenderCount] = useState(4);

  const renderCountHandler = () => {
    setRenderCount(renderCount   1);
  };

  return (
    <div>
      <p>{renderCount}</p>
      <br />
      <Child renderCountHandler={renderCountHandler} />
    </div>
  );
};

const Child = forwardRef((props, ref) => {
  //Can't access props.renderCountHandler Only props.children
  return (
    <div ref={ref}>
      <button onClick={props.renderCountHandler}>Click Me</button>
    </div>
  );
});

ReactDOM.render(<Parent />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>