Text Sliders front-end using React

I’m learning basics of react and currently im exploring certain problem statements available on the internet. One such problem statement required me to create a react app for a text slide creator with previous , next and reset buttons. I was able to create till here – My app.js file looks something like this-

import React from 'react';
import MyComponent from './MyComponent'
import slidesData from './slidesData'
import SlideComponent from './SlideComponent'

import './App.css';

function App(){

const slidestate=slidesData.map(slide=><SlideComponent key={slide.id} sli={slide}/>)
return(
<div id="main-div">
  {slidestate}
<MyComponent />
  

</div>
)
}
export default App;

and my SlideComponent.js looks something like –

import React from 'react'


function SlideComponent(props){
return(
    <div>
    <h1>{props.sli.title}</h1>
    <p>{props.sli.description}</p>
    </div>
)
}




export default SlideComponent

and my ‘MyComponent.js’ looks something like this –

import React from 'react'


function MyComponent(){
return(
    <div>
        <button>Reset</button>
        
        <button>Previous</button>
     
        <button>Next</button>
        
    </div>
)
}





export default MyComponent

and the JSON file in which i wish to render the text slides from looks something like –

const slidesData = [{id:1,title:"title1",description:"hello first slide"},{id:2,title:"title2",description:"hello second slide"}]




export default slidesData

I have basic knowledge about states and props and useEffect() components and also functional and class components. I want to use the buttons to change the slide to previous , next or reset and respectively want that slide(from json file only) to be rendered at once (also not worried about timing of slides as of now). I know i have to use state change here , but i do not know how to proceed.Please help me. please excuse me for not styling it properly. i basically wanted to provide this functionality and then proceed with the css part. Please help me achieve this. It would help me a lot.

Answer

From what I understood, you need to have a state as current_slide that will hold your current slide id. whenever you press next or previous button you need to trigger a function in App() that is passed through your MyComponent and that will change your current_slide value and you need to pass that to your slide component so that can be shown. In case of reset button press event, just set the value of current_slide to the default value. Hope that helps. If I misunderstood, please correct me.

Advertisement

Answer