Issue with React rendering numbers without displaying div

Question

Issue with React rendering numbers without displaying div

In my user interface, I am attempting to display each box with a 1-second delay (Box1 after 1 second, Box2 after another 1 second, and so on).

https://i.sstatic.net/FdTkY.png

However, instead of the desired result, I am seeing something different:

https://i.sstatic.net/9zpE2.png

Please review my React code below and help me identify where I may have gone wrong, resulting in the unexpected output showing numbers alongside the boxes:

const CreateBox = (props) => {
  return (
    <>
    {/*<div className="box">{props.num}</div>*/}
    <div className="box"></div>
    </>
  )
} 

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {
          return setTimeout(() => {
            // return (<CreateBox num={item} />)
            return (<CreateBox />)
          }, 1000)
        })
      }
    </div>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />, root)

View on Codepen - https://codepen.io/anon/pen/pBLPMY

javascript html css reactjs react-dom

Answer 1

Answer №1

To avoid creating a new timeout for each element in the array every time it renders, consider setting up an interval in the `componentDidMount` method and incrementing a counter in your state until it reaches a certain value. You can then use this counter in your render method.

Here's an example:

class App extends React.Component {
  state = {
    count: 0
  };

  componentDidMount() {
    const interval = setInterval(() => {
      this.setState(
        ({ count }) => ({ count: count + 1 }),
        () => {
          if (this.state.count === 10) {
            clearInterval(interval);
          }
        }
      );
    }, 1000);
  }

  render() {
    return (
      <div className="app">
        <h3>App</h3>
        {Array.from({ length: this.state.count }, (_, index) => (
          <CreateBox key={index} num={index + 1} />
        ))}
      </div>
    );
  }
}

const CreateBox = props => {
  return <div className="box">{props.num}</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

To avoid creating a new timeout for each element in the array every time it renders, consider setting up an interval in the `componentDidMount` method and incrementing a counter in your state until it reaches a certain value. You can then use this counter in your render method.

Here's an example:

class App extends React.Component {
  state = {
    count: 0
  };

  componentDidMount() {
    const interval = setInterval(() => {
      this.setState(
        ({ count }) => ({ count: count + 1 }),
        () => {
          if (this.state.count === 10) {
            clearInterval(interval);
          }
        }
      );
    }, 1000);
  }

  render() {
    return (
      <div className="app">
        <h3>App</h3>
        {Array.from({ length: this.state.count }, (_, index) => (
          <CreateBox key={index} num={index + 1} />
        ))}
      </div>
    );
  }
}

const CreateBox = props => {
  return <div className="box">{props.num}</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

Answer №2

Avoid using setTimeout within a loop; it's better to place the timer inside the CreateBox component by utilizing state. When you eliminate the timeout, the boxes become visible. To control the delay, assign the index * 1000 as a timer for each element.

Answer 4

Avoid using setTimeout within a loop; it's better to place the timer inside the CreateBox component by utilizing state. When you eliminate the timeout, the boxes become visible. To control the delay, assign the index * 1000 as a timer for each element.

Answer 5

Answer №3

class GenerateSquare extends React.Component {
  state = {
    opacity: 0
  }

  constructor(props){
    super(props)
  }
  
  componentDidMount(){
    setTimeout(()=> this.setState({opacity: 1}),`${this.props.time}000`)  
  }
  
  render() {
    console.log(this.props)
    return (
      <div style={this.state} className="square">{this.props.num}</div>
    )
  }
};

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,'w',5,6,7,8,9,10].map((item, index) => <GenerateSquare num={item} time={index}/>)
        
      }
    </div>
  )
}

const target = document.querySelector('#root')
ReactDOM.render(<App />, target)

Answer 6

class GenerateSquare extends React.Component {
  state = {
    opacity: 0
  }

  constructor(props){
    super(props)
  }
  
  componentDidMount(){
    setTimeout(()=> this.setState({opacity: 1}),`${this.props.time}000`)  
  }
  
  render() {
    console.log(this.props)
    return (
      <div style={this.state} className="square">{this.props.num}</div>
    )
  }
};

const App = () => {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,'w',5,6,7,8,9,10].map((item, index) => <GenerateSquare num={item} time={index}/>)
        
      }
    </div>
  )
}

const target = document.querySelector('#root')
ReactDOM.render(<App />, target)

Answer 7

Answer №4

function generateBoxes(props) {
  return (
   <div className="box">{props.num}</div>
  )
} 

function displayApp() {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {              
             return (<generateBoxes num={item} />)
        })
      }
    </div>
  )
}
const root = document.querySelector('#root')
ReactDOM.render(<displayApp />, root)

Answer 8

function generateBoxes(props) {
  return (
   <div className="box">{props.num}</div>
  )
} 

function displayApp() {
  return (
    <div className="app">
      <h3>App</h3>
      {
        [1,2,3,4,5,6,7,8,9,10].map((item) => {              
             return (<generateBoxes num={item} />)
        })
      }
    </div>
  )
}
const root = document.querySelector('#root')
ReactDOM.render(<displayApp />, root)

Issue with React rendering numbers without displaying div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to use HTML to prevent the user from navigating away from the current page when submitting a form? Could jQuery, PHP, or a combination of

Utilize Moment to round a date either up or down

Having issues with nth-child? It seems like nth-of-type isn't working either

Utilizing HTML5 Drag and Drop feature to track the initial position of the element being dragged

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

Ensure that the text is wrapped properly when implementing innerHTML functionality

Guide on sending a key to a text input field using JavaScript

Are there any available tools or scripting methods for accommodating various vendor prefixes?

Can I fetch the visible rows (along with their order) from a React Material-table?

Is there a way to choose multiple IDs in this code that all share a common word?

Vue.js - Implementing multiple values (array) for a component through a property

Create a nested array of subcategories within an array object

The constant reloading of the page is hindering the crucial display of the data

Tips for identifying a scroll down gesture on a touch device with jQuery

Font family 'anticon' is not recognized

Show a table when a button is clicked using Javascript

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Encountering a JS error that states: "Uncaught SyntaxError: missing ) after argument list" when running the following code

Identifying elements in @mui/material and @mui/labs

Difficulties encountered when preserving the data of a website in HTML format