I got the unexpected token error in innerFunc, I have no clue why is it so.
const TestComp = () => {
innerFunc(){ //error here?
console.log('xx')
}
render() {
return(
<div>test comp content</div>
)
}
}
const Something = ({
something
}) => {
return(
<div>{TestComp.toString()}</div>
)
}
Any clue why?
This right here:
const TestComp = () => { // <---- Function starts
innerFunc(){ // function inside a function needs to be declared with `function` identifer
console.log('xx')
}
render() {
return(
<div>test comp content</div>
)
}
} // <---- Function ends
is a function.
You are trying to add attributes to this function, which is causing the error.
You can add attributes to the class like the way you done it.
To solve the error define a function instead like such:
const TestComp = () => {
function innerFunc(){
console.log('xx')
}
return( // you don't need to define render here, just return the jsx
<div>test comp content</div>
)
}
Or better yet, define it outside this function based component.
I hope this helps.
render() also require function?
innerFunc? in jsx <div onClick={()=>this. innerFunc()} >test</div> I got innerFunc of undefinedonClick={innerFunc} without this.You have mixed up the syntaxes of a functional stateless component and a react component
class TestComp extends React.Component {
innerFunc(){ //error here?
console.log('xx')
}
render() {
return(
<div>test comp content</div>
)
}
}
