Hackerrank React Certification Solutions [Hackerrank Certifications Solutions]

import React from 'react';

function Slides({slides}) {
const [activeState, setActiveState] = React.useState(0);
const reset = () => setActiveState(0)
const next = () => setActiveState(n => n + 1)
const prev = () => setActiveState(n => n - 1)

return (
<div>
<div id="navigation" className="text-center">
<button data-testid="button-restart" className="small outlined" onClick={reset} disabled={activeState===0}>Restart</button>
<button data-testid="button-prev" className="small" onClick={prev} disabled={activeState===0}>Prev</button>
<button data-testid="button-next" className="small" onClick={next} disabled={activeState===slides.length-1}>Next</button>
</div>
<div id="slide" className="card text-center">
<h1 data-testid="title">{slides[activeState].title}</h1>
<p data-testid="text">{slides[activeState].text}</p>
</div>
</div>
);

}

export default Slides;

❤️

it didn't work out when the index greater than the length of all slides. but good trial loved it

in how many attempts you solved it?

getting this error , can someone help
expect(element).toHaveTextContent()

Expected element to have text content:
title 0

Received:

title 1

43 |

44 | const titleElem = getByTestId(testIds.title);

> 45 | expect(titleElem).toHaveTextContent(slides[0].title);

| ^

46 |

47 | const textElem = getByTestId(testIds.text);

48 | expect(textElem).toHaveTextContent(slides[0].text);

at Object.<anonymous> (src/App.test.js:45:21)

Thank you

Great work✨✌️

I suggest you remove the music background next time recording a tech video.

Superb👌👌👌

Great work. Keep it up.👌😍

👍👍

👍

👀

Maru

Supiri <3

🔥🔥

❤️❤️😍😍

😍🤩

♥️♥️