When attempting to use React, I encountered a warning message that only appeared when clicking the button for the first time. After consulting chatGPT, it assured me that my code was correct and should not be generating these warnings.
// App.js
import MyRef from "./MyRef";
export default function App() {
return (
<>
<MyRef />
</>
);
}
// MyRef.js
import React, {useRef} from 'react'
const MyRef = () => {
const inputRef = useRef()
const handleClick = () => {
console.log(inputRef.current)
}
return (
<div key="hello">
<input type="text" ref={inputRef}/>
<button onClick={handleClick}>Click me</button>
</div>
)
}
export default MyRef
Upon inspecting the console in Chrome dev tools, the following warning messages were generated:
Warning: div: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
and
Warning: input: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Interestingly, this warning only occurred on the initial button click. By changing the line of code from: console.log(inputRef.current) to console.log(inputRef.current.value) The warning message disappeared upon the first button click.
So, the question arises - how can I prevent this warning message while still needing to utilize console.log(inputRef.current)?