3

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:

  • Have a search that hits an external API, returning JSON.
  • The JSON result will be shown to the User in a readable format
  • Have buttons with dynamic links
  • Have a dropdown with some of the json data

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

Improve this question

1 Answer 1

Reset to default
2

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!

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.