CODEWITHSUNDEEP
reactjs
Boudewijn van Veen
Boudewijn van Veen

Reputation: 427

React component composition

I trying to build a simple slide show using react (I am learning react) and have a question regarding the component composition/information flow.

I have a slides component which has two child components. One child, the slideContainer, displays the slide and the other component, the slideNavigation displays the navigation buttons (back/next).

The slides component receives the slides collection as prop and has the currentSlide as State. The slideNavigation component receives the currentSlide, the slides collection and the setCurrentSlide callback as props.

The slideNavigation component determines the new currentSlide based upon the button that was clicked, the slide collection and the currentSlide. The new currentSlide is returned to the slides component using the callBack. The slides component updates the state accordingly and passes it to the display component, which displays the new slide. See the code of the slides component below.

slides.js

My question: It seems a bit weird to determine the new currentSlide in the navigation component, pass to back to its parent which passes it again to the navigation component where it just came from. Am i doing something wrong, are the components correctly composed??

Upvotes: 1

Views: 201

Answers (2)

palsrealm
palsrealm

Reputation: 5243

The only change that you can make is to move the determination of the new slide, from the slideNavigation to the parent slides component.

The slides component should hold the state and be responsible for managing it. It contains 2 dumb child components, the slideContainer and the slideNavigation. These child components should know nothing about what is going on; the Container should just show what it receives from the parent and the navigation should just return events that occur (the next and previous button clicks)

It should be the job of the parent slides container to manage the state transition by sending props down to the slideNavigation component, which would be tied to the buttons for the next and previous actions.

Upvotes: 1

Daniel
Daniel

Reputation: 1953

You should add callbacks/props to your slidenavigation like:

onPrevSlideButtonClicked

onNextSlideButtonClicked

Then in your parent component you will add callbacks for each event and calculate the new slide (because that is where all your info is stored).

Upvotes: 1

Related Questions