I am trying to make a slideshow app by passing the following data to Slide.js
via props.
const SLIDES = [
{
title: "Today's workout plan",
text: "We're gonna do 3 fundamental exercises."
},
{
title: "First, 10 push-ups",
text: "Do 10 reps. Remember about full range of motion. Don't rush."
},
{
title: "Next, 20 squats",
text: "Squats are important. Remember to keep your back straight."
},
{
title: "Finally, 15 sit-ups",
text: "Slightly bend your knees. Remember about full range of motion."
},
{
title: "Great job!",
text: "You made it, have a nice day and see you next time!"
}
];
My child component Slide.js
has the following code
import React, { useState, useEffect } from "react";
function Slides({ slides }) {
const [slideShow, setSlide] = useState(slides);
useEffect(() => {
setSlide(slideShow[0]);
console.log("slides", slideShow[0]);
}, []);
return (
<div>
<div id="navigation" className="text-center">
<button data-testid="button-restart" className="small outlined">
Restart
</button>
<button data-testid="button-prev" className="small">
Prev
</button>
<button data-testid="button-next" className="small">
Next
</button>
</div>
{slideShow.map((slide, i) => (
<div id={i} className="card text-center">
<h1 data-testid="title">{slide.title}</h1>
<p data-testid="text">{slide.text}</p>
</div>
))}
</div>
);
}
export default Slides;
I thought using setSlide(slideShow[0])
would only render the first item in the array of objects after the app initially loads. But I get
TypeError: slideShow.map is not a function
But when I console.log("slides", slideShow[0])
I output
slides {title: "Today's workout plan", text: "We're gonna do 3 fundamental exercises."}
And if I change my code to
setSlide(slideShow.slice(0, 1));
The app shows only the first object in the array but if I console.log("slides", slideShow)
, I get the whole array of objects even though I thought I should receive the sliced version.
Is my map
function not referencing the slideShow[0]
for the error to occur?