CODEWITHSUNDEEP
reactjs
Damian
Damian

Reputation: 33

How to structure components

I'm just starting to learn react and I'm wondering what the best way to structure one of my test projects.

The application is one page, and has to:

I'm thinking there should be a component for each of those, with the associations setup as the 'Search' being the parent component, with each of the other components inheriting directly from that..

For example:

app
│   ├── search component
│   │   ├── dropdown component
│   │   ├── list component
│   │   ├── button component
│   │  

This feels like the wrong approach though. I was looking at redux for state management but thought it was a bit too overkill. Since I need access to the searches data for each of the components, is there a better way to structure this that allows for that? Thanks

Upvotes: 3

Views: 90

Answers (1)

palsrealm
palsrealm

Reputation: 5243

Your component design seems appropriate for the application you are trying to build. Redux would indeed be an overkill in your case, provided the data from the api is simple and the state can be managed by the parent component.

A few pointers for your path ahead:

  1. Call the api in componentDidMount of your Search component to get the JSON data and save it to the state of the component.
  2. Create a Loading component, which would be displayed in your Search component, while your api call completes (state does not have data).
  3. Pass the json data from the state of Search to its child components as props. Only pass the part of the state that is relevant to the child.
  4. Pass actions from the Search component to the children for handling any changes in data due to any events (like button onClick, dropdown onChange etc.).These actions would modify the state of the Search component and pass the changes to the child components through props.

Hope this helps!

Upvotes: 2

Related Questions