Quiero mostrar los comentarios de los usuarios uno por uno en mi React HTML en cada parpadeo.
Actualmente se están representando en un formato de lista, pero quiero representar uno a la vez y mostrarlo después de cada parpadeo.
<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, WTD 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>ejemplo de muestra:
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>