CODEWITHSUNDEEP
reactjstypescript
ciz30
ciz30

Reputation: 453

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

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'.

Upvotes: 1

Views: 10792

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

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.

Upvotes: 2

Related Questions