I want to display user comments one by one in my React HTML on every Blink.
Currently they are rendering in a list format but I want to render one at a time and display next after every Blink
<ul id="testimonials-carosel">
<div id="quote_wrap">
<li>
<div className="quote_content">
Love this theme and so impressed with the customer support!!! Has been great for someone like myself with very little experience! Absolutely Fantastic!
</div>
<div className="quote_author">
<strong>Elena Doe</strong> - Public speaker, MEDIADOT
</div>
</li>
<li>
<div className="quote_content">
Absolutely amazing! This was more than worth the purchase! Great job, and thanks for your amazing work!
</div>
<div className="quote_author">
<strong>John Doe</strong> - Developer, W.T.D. Ltd
</div>
</li>
<li>
<div className="quote_content">
Constellation is one of the most comprehensive, well-documented, well-planned projects we’ve ever seen. Cheers to great work! Lorem ipsum dolor sit amet, consectetur adipisicing
</div>
<div className="quote_author">
<strong>John Doe</strong> - Designer, WESTWOOD
</div>
</li>
</div>
</ul>sample example :
function App() {
const [data, setData] = React.useState([{'title': "dsasdsa"},{'title': "fsadasdsa"},{'title': "jhrertgertert"},{'title': "vbbfdgswfds"},{'title': "zzfssafsdfs"}]);
const [data1, setData1] = React.useState(null);
React.useEffect(() => {setData1(data[0]);},[]) // to show the first item with no delay
React.useEffect(() => {
// show items from index 1 with an interval
let index = 1;
const interval = setInterval(() => {
setData1(data[index]);
index += 1;
if (index >= data.length) {
clearInterval(interval);
}
}, 3000);
return () => {
clearInterval(interval);
};
}, [data]);
const list = data1 && (
<ul key={data1.title}>
<li>{data1.title}</li>
</ul>
);
return <div className="App">{list}</div>;
}
ReactDOM.render(<App/>,document.querySelector('#root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="root"></div>