CODEWITHSUNDEEP
reactjsnext.js
JohnPix
JohnPix

Reputation: 1843

Add elements dynamically on a page in React

I have to print 10 elements in a column, like 1,2,3 ... with a timeout of 1 second. But in my code I don't know how to print message in a loop 🤔. I tried with innerHTML but I don't think it's a right way to do.

import { useState } from 'react'

export default function Timeout() {
  const [message, setMessage] = useState(1)

  while (message <= 10) {
    setTimeout(() => {
      setMessage(message)
    }, 1000)
    message++
  }

  return <div>{message}</div>
}

Upvotes: 0

Views: 829

Answers (2)

Hamza Sehouli
Hamza Sehouli

Reputation: 193

Try this one:

import {useState } from "react";

export default function Timeout() {
 const [message, setMessage] = useState([1]);
  const Markup = (
   <ul>
    {message?.map((n) => (
    <li>{n}</li>
    ))}
   </ul>
  );
  setTimeout(() => {
  if (message.length <= 9) {
    setMessage([...message, message[message.length - 1] + 1]);
  }
 }, 1000);

 return <div>{Markup}</div>;
}

Upvotes: 1

Hesam
Hesam

Reputation: 500

try this:

import { useState } from 'react'

export default function Timeout() {
  const [message, setMessage] = useState([1])

  setTimeout(() => {
    message.length <= 10 && setMessage((perv)=>[...perv,perv.length + 1]);
  }, 1000)

  return <div>{message.map((item)=>item}</div>
}

Upvotes: 1

Related Questions