How to pass data between react components?

Hi, I am trying to make Tip Calculator App using React JS.

Below is my approach for this challenge -

  1. I am breaking this challenge in to 4 parts which are my 4 components.
    • Component 1 : Bill Input
    • Component 2 : Select Tips
    • Component 3: Number of People
    • Component 4: Total/person
  2. I know the logic.

Problem that I’m facing -

How to pass bill input component data to Select Tip component ? Also, advise how can I reuse the Bill input component as a number of people component.

How to pass bill input component data to Select Tip component ?

The simplest way in React is lifting state up. I once wrote a simple pen to demonstrate this.

Beyond this, as apps get more complex, you look into things like using Context or some kind of state management like redux.

Also, advise how can I reuse the Bill input component as a number of people component.

Does that make sense? Is there enough in common with those two? If so, you would create a generic component and pass in the data as parameters.

1 Like

Thanks Kevin :slight_smile:

It’s awkward but if possible could you please share the experience of Turing Test. I want to make a carreer in Frontend Developer.

It’s meant to be a joke. It means that people can’t tell if I’m a computer or a person.

1 Like

:roll_eyes: Ok, thanks Kevin no issue.