Is it possible for a react app to have multiple components with state?

Viewed 63

I'm learning reactJS and following what I thought were best practices (state at lowest logical level).

My structure is:

  • page with own inputs (own state)
    • card component (2 of these each with their own table)
      • table (own state for table inputs)
        • table row
          • table cell (with select input)
          • table cell (with text input)

I'm now trying to save my data to the server and it's occurring to me I have no way to save the state on the table. I may have to remove the table state and only have state at the highest level. Is it uncommon to have multiple states in the same app? If so, that means I have to write out the prop for the handler method for an onChange on an input type="select" in my table cell all the way down through page=>card=>table=>row=>cell? It seems like the props list will grow rather quickly with this pattern. I see this concern raised in some of the react documentation, but none of the suggestions seem to be a good fit. The example for contexts addresses a single item that may need to be accessed by many components not a series of props meant only for a few components that are just much further down the hierarchy.

0 Answers
Related