passing onclick function as argument to another component in react/typescript

Question

New Reactjs(Hooks) developer here, my question: i'm at the moment in Menu.tsx and i want to click that button and it should affect in another component in 'Transports.tsx', i have written two ways(dont know how to make them work), one way is normal button and onclick on it and another way is adding them inside '< Link to=" / Transports " >'. If i put that button in that same component 'Transports.tsx' it would work without problem, but need to have that button in 'Menu.tsx'.

import React from 'react'

function Menu() {
  return (
    <div>
        <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onClick={() => filterData(OrderState.Delivered)}
                  >
                    delivered
                  </button>

                  {/* <Link to="/Transports">
                  <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onClick={() => filterData(OrderState.Delivered)}
                  > delivered</button>
            </Link> */}
    </div>
  )
}

export default Menu

Transports.tsx

import React from 'react'

function Transports() {
    function filterData(filter: any) {
        setDefault(true);
        if (filter) {
          setData(ordrs?.filter((f) => f.state === filter));
        } else {
          setData(ordrs?.filter((f) => f.state !== "Delivered"));
        }
      }
    return (
        <div>
            
        </div>
    )
}

export default Transports

https://stackoverflow.com/questions/37949981/call-child-method-from-parent This might help you — Abhishek Sharma, May 03 '21 at 11:41
these two are not parent and child, i mean these are not inside each — , May 03 '21 at 11:42
Then you might have to go for context. (or redux). https://reactjs.org/docs/context.html#dynamic-context. Another alternative is to pass some state value in `` and then based on state value, you can trigger in useEffect. https://stackoverflow.com/a/64008243/2650209 — Abhishek Sharma, May 03 '21 at 11:47
Can you tell me where does your Menu and Transport component reside? — Surjeet Bhadauriya, May 03 '21 at 11:50
@SurjeetBhadauriya import Menuu from "./Menu"; import { Transports } from "./OwnTransports"; function App() { return (

); } export default App; — , May 03 '21 at 12:07
@AbhishekSharma could you create working example using my code ? — , May 03 '21 at 13:53

score 0 · Answer 1 · answered May 03 '21 at 11:51

0

You should use context api for this because they are not in same hierarchy. Use context api to avoid you restructuring your project for prop drilling...

https://reactjs.org/docs/hooks-reference.html

This tutorial explains context api better with an example

https://dev.to/uyadavdev/context-api-hooks-building-minimalist-dark-mode-33b6

answered May 03 '21 at 11:51

Cavdy

598
8
15

would appreciate if you could give working example using my code – May 03 '21 at 13:07
my two components are here : import Menuu from "./Menu"; import { Transports } from "./OwnTransports"; function App() { return (

); } export default App; – May 03 '21 at 13:07

Abhishek Sharma · Answer 2 · 2021-05-04T04:27:00.853

As mentioned in the comment you should explore the concept of context as it is a more preferable approach.

Below is a workaround that will do the job but it's kind of a hack.

import React from 'react'

function Menu() {
  return (
    <div>
       <Link to={{pathname: "/Transports", state: {triggerFilters: true, filters: OrderState.Delivered}}}>
         <button
           type="button"
           className="btn btn-secondary"
           data-bs-dismiss="modal"
          > delivered</button>
        </Link>
    </div>
  )
}

export default Menu

import React from 'react'

function Transports(props) {
  function filterData(filter: any) {
    setDefault(true);
    if (filter) {
      setData(ordrs?.filter((f) => f.state === filter));
    } else {
      setData(ordrs?.filter((f) => f.state !== "Delivered"));
    }
  }
  
  useEffect(() => {
    if (props.location.state.triggerFilters === true) {
      filterData(props.location.state.filters);
    }
  }, [filterData])

  return (
    <div>          
    </div>
  )
}

export default Transports

Code above is just an example, you can pass filters as well in the state from menu and use those here in transports.

Explore a little bit more about react context and routing

would have been better if you could provide context version, but tried this one and it says 'TypeError: Cannot read property 'state' of undefined', and also 'Cannot find name 'filterData'.ts(2304)' — , May 03 '21 at 18:13
I have updated the code to remove the 2nd error. And 1st error should not be there if you have integrated react router properly. And Context is not that straight forward to implement in a component. You gotta do it at App level. Try somethings first. — Abhishek Sharma, May 04 '21 at 04:28

passing onclick function as argument to another component in react/typescript

2 Answers2