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.❤️
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>