This is my App.js file
import Data from "./second"
function App() {
return (
<div>
<Data
given_data = 'This is data'></Data>
</div>
);
}
export default App;
This is my second.js file
function Data(props)
{
return(
<div >
<p>{props.given_data}</p>
</div>
);
}
export default Data;
If I mistype props.given_data of second.js as props.given_dattttaa or something else it does not show any error, why?
Without any any error I can't find what I have done wrong?
Is there any way to show error either in browser console or editor terminal?
You are using plain Javascript, thus there is no way to determine what is actually passed as props until the code is actually called.
This is what Typescript was (more or less) invented for. Loosely speaking, Typescript allows you to use Javascript but with types, or in other words: Typescript is Javascript with "some extra documentation". A quick start guide is provided in the documentation.
For your specific case, you could then type the props object as follows.
// define whatever you are going to pass to props
type DataProps = {
given_data: string
}
function Data(props: DataProps){
console.log(props.given_data)
....
}
After you have done the setup, you will notice that typescript will complain if you access something different in props than given_data.