Hi ! I am using React to create a small website and I want to create a text slideshow that changes every two seconds. I am encountering issues in actually making it work, would anyone be interested in helping me fix my code ?
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {NavBar} from './components/navbar';
import {ChangeText} from './components/changer';
let displayedText = "";
function App() {
handleSlide() {
let quotes = [
"Hey there",
"I can change.",
"See?",
];
let i = 0;
setInterval(function() {
displayedText = quotes[i];
if (i == quotes.length) {
i = 0;
}
else {
i++;
}
}, 10 * 1000);
)
}
return (
<div className="App">
<NavBar />
<header className="App-header">
<ChangeText className= "company-Name" slidey={handleSlide()}/>
<span>Some opening text</span>
<p>
Click here to enter.
</p>
</header>
</div>
);
}
export default App;
Up there is the main component ^
import React from "react";
export class ChangeText extends React.Component {
render(){
return (
<p>{this.props.slidey}</p>
)
}
}
This is my small one, which is supposed to render the text changing.