React & TypeScript how pass data from child to parent at onClick via props

Question

I have parent and child component. And i wan't to pass from child to parent component data at onClick via props. How can i do that? i tried:

Parent.tsx

const items = [
  {
    title: "A"
  },
  {
    title: "B"
  }
]

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e: React.MouseEvent, title: string) => {
     setSomeState(title);
   }

   return (
     <Child items={items} toggleState={(e) => toggleState(e, item.title)} />
   )
}

Child.tsx

type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent) => void;
}

const Child: React.FC<ChildProps> = (props) => {
   return (
    {props.items.map((item) => (
       <button onClick={props.toggleState}> pass clicked item title to parent </button>
    ))}
   )
}

but in my parent component omn toggleState prop item.title showing error:

any Cannot find name 'item'.

You don't pass any items to Child, and because you have strick any validation it throws an error. — Dennis Vash
– Dennis Vash, Commented May 3, 2020 at 9:39
Sorry i didn't show on example but actually i passed items to child — ciz30
– ciz30, Commented May 3, 2020 at 10:04

T.J. Crowder · Accepted Answer · 2020-05-03 10:23:22Z

As with any other function call, you have to pass the information as an argument:

Parent.tsx:

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e: React.MouseEvent, title: string) => {
     setSomeState(title);
   }

   return (
     <Child toggleState={(e, title) => toggleState(e, title)} items={items}/>
   )
   // −−−−−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−−−−^^^^^
}

Child.tsx:

type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent, title: string) => void;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

const Child: React.FC<ChildProps> = (props) => {
   return (
    {props.items.map((item) => (
       <button onClick={(e) => props.toggleState(e, item.title)}> pass clicked item title to parent </button>
    ))}
   )
   // −−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

Note the changes to toggleState in Parent.tsx and onClick in Child.tsx.

Live Example:

const { useState } = React;

/*
interface Item {
  title: string;
}
*/
const items = [
    {title: "Item 1"},
    {title: "Item 2"},
    {title: "Item 3"},
    {title: "Item 4"},
];

const Parent = () => {
   const [someState, setSomeState] = useState("");

   const toggleState = (e/*: React.MouseEvent*/, title/*: string*/) => {
     setSomeState(title);
   }

   return (
     <div>
       <div>someState = {someState}</div>
       <Child items={items} toggleState={(e, title) => toggleState(e, title)} />
     </div>
   )
   // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−−−−^^^^^
}

/*
type ChildProps = {
 items: Item[];
 toggleState: (e: React.MouseEvent, title: string) => void;
}
*/

const Child/*: React.FC<ChildProps>*/ = (props) => {
   return <React.Fragment>
    {props.items.map((item) => (
       <button onClick={(e) => props.toggleState(e, item.title)}> pass clicked item title to parent </button>
    ))}
   </React.Fragment>
   // −−−−−−−−−−−−−−−−−−^^^^^^^−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

On the playground to show the types work.

if i tried this getting error in child : (property) title: string Expected 1 arguments, but got 2. and in parent : Type '(e: any, title: any) => void' is not assignable to type '(e: MouseEvent<Element, MouseEvent>) => void'.ts(2322)
@ciz30 - Just a typo-level error, title was missing from toggleState in ChildProps. I've fixed that and added a runnable example and a link to the playground.

Collectives™ on Stack Overflow

React & TypeScript how pass data from child to parent at onClick via props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related