React - 如何使用子组件设置我的父 state，使用 function 结构（不是类）

Question

I'm trying to change the state of parent component using a button in my child component by passing a function "setName" to the child. I read a lot of examples but they seemed to all use classes, where I'm trying to use functions since the React doc on hooks seems to promote functions over class.

In my parent, I have

  let [Name, setName] = useState("John Doe");

And I pass the setName method by using JSX in my return statement:

<Child childSetName=({setName})/>

In my child component I have

export const Child = ({childSetName}) => {

return(
    <a onDoubleClick={()=>{childSetName("Mary Ann")}}>
        Click me
    </a>
)}

I got a typeError: childSetNameis not a function.

I also read this popular question , but it uses class, not functions as all the hooks example from React docs are.

How can I set my parent state using child component, both retain their function structures not classes.

Answer 1

I think you have wrong syntax here

<Child childSetName=({setName})/>

Should change like this

<Child childSetName={setName}/>

and

export const Child = ({childSetName}) => {

return(
    <a onClick={()=>{childSetName("Mary Ann")}}>
        Click me
    </a>
)}