passing data to componnet onClick in react js

Question

We have 2 components. one is Test1 and the second one is Test2. My question is how we can pass data from component Test1 to Test2(they are separated components.) onClick event. : for e.g a function like this:

  const ClickHandler =()=>{
        //pass data to Test2
      
  }

Data is generally passed via props to children components, but there are other methods for storing data and passing it around. You've not provided enough context to really provide a useful answer. Can you update your question to include a Minimal, Complete, and Reproducible Code Example? — Drew Reese
– Drew Reese, Commented Jun 11, 2021 at 8:54

Doublers Kay · Accepted Answer · 2021-07-17 07:29:07Z

1

I think there will be two methods to do this.

Be a child of the same parent and share props.

  import {useState} from "React"
   
  const TestOneComponent = ({value}) => (
    <span>{value.toString()}<span>
  )

  const TestTwoComponent = ({value, onClick}) => (
    <span>{value.toString()}</span>
    <button onClick={onClick}>Increase Value</button>
  )

  const ParentComponent = () => {
    const [value, setValue] = useState(0)

    const onClick = () => {
      setValue(value + 1)
    }

    return (
      <>
        <TestOneComponent value={value}>
        <TestTwoComponent value={value} onClick={onClick}>
      </>
    )
  }

Manage store and pass props to those two components.

edited Jul 17, 2021 at 7:29

answered Jun 11, 2021 at 8:51

Doublers Kay

1761 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amirreza Over a year ago

can you explain method 2, please?

Doublers Kay Over a year ago

It is the same as the first method in concept. Share props. But just use global store.

Mohak Gupta · Accepted Answer · 2021-06-11 08:36:19Z

0

Either you can use props to pass data in to the other component and render it when the onClick event is triggered or

you can navigate to a new page by onClick event and pass data into the header/route and access that data in the new page's component

answered Jun 11, 2021 at 8:36

Mohak Gupta

1931 silver badge9 bronze badges

Collectives™ on Stack Overflow

passing data to componnet onClick in react js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related