I'm very confused learning react. For example I have very simple react component
export default function Foo(){
return(
<div>
some text
)
}
And I want to add a child component:
export default function Foo(){
const Bar = ()=>{
return (
<input placeholder="some input"/>
)
}
return(
<div>
<div>some text</div>
</div>
)
}
And as much as I know, I can use this component in two ways:
return(
<div>
<div>some text</div>
{Bar()}
</div>
)
return(
<div>
<div>some text</div>
<Bar/>
</div>
)
What exactly different between these two? I thought it was same, until I faced an issue with input field, that if I use component as <Bar/>,
Demo here: https://codesandbox.io/s/gifted-archimedes-l7bce7?file=/src/App.js
So what is the exact problem here? I code as component all the time, as per my understand <Bar/> is same as Bar() when it return
Am I right or not?
Edit: I found this blog, and it very close to this question and it great too :) https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l?signin=true
