add number between string then render it in react.js

Question

I have tried this with console.log and it works, but I am stuck on how to turn it into a div

let N = 13;
let nums = Array.apply(1, { length: N }).map(Number.call, Number)

console.log(nums)
for (let el of nums) {
  if (el <= 9) {
    time = `0`+el+`:00`;
                    
    console.log(time);
        
  } else if (el >= 9) {
    time = el+`:00`
    console.log(time);
  }
}

I want to put it in jsx

class SchedulePage extends React.Component {
    render(){
        
        return (
            <div className="schedule-page-container">
                {right here}
            </div>
        );
    }
}

I'm not quite sure what you are trying to achieve, but have you tried storing the result in a variable (or state) and render that? — Decoolipascal
– Decoolipascal, Commented May 25, 2021 at 12:30
This abomination Array.apply(1, { length: N }).map(Number.call, Number) can be replaced with [...Array(N).keys()] — adiga
– adiga, Commented May 25, 2021 at 12:48

aleksxor · Accepted Answer · 2021-05-26 06:23:43Z

2

Maybe like this? Render one div for each number in your nums array:

class SchedulePage extends React.Component {
    render(){
        let N = 13;
        let nums = Array.apply(1, { length: N }).map(Number.call, Number);
        return (
            <div className="schedule-page-container">
                {nums.map(el => {
                    const time = el <= 9 ? `0${el}:00` : `${el}:00`;
                    return <div key={time}>{time}</div>;
                 })
               }
            </div>
        );
    }
}

edited May 26, 2021 at 6:23

aleksxor

8,5001 gold badge27 silver badges31 bronze badges

answered May 25, 2021 at 12:40

Ogod

9581 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Najafi · Accepted Answer · 2021-05-25 12:37:41Z

1

class SchedulePage extends React.Component {

renderElement() {
let N = 13;
let nums = Array.apply(1, { length: N }).map(Number.call, Number)
let time
console.log(nums)
            for (let el of nums) {
                if (el <= 9) {
                    time = `0`+el+`:00`;
                    
                 
        
                }else if(el >= 9){
                    time = el+`:00`
                }
            }
return time
}   
render(){
        
        return (
            <div className="schedule-page-container">
                {this.renderElement()}
            </div>
        );
    }
}

answered May 25, 2021 at 12:37

Ali Najafi

1436 bronze badges

Comments

Tushar Shahi · Accepted Answer · 2021-05-25 12:38:10Z

You will have to save the value somewhere and display it. Pass it down as prop, save it as an instance variable or in your state, there are many options.


class SchedulePage extends React.Component {
constructor(){
super(props);
let N = 13;
let nums = Array.apply(1, { length: N }).map(Number.call, Number)
let time = '';
          console.log(nums)
            for (let el of nums) {
                if (el <= 9) {
                    time = `0`+el+`:00`;
                    
                    console.log(time);
        
                }else if(el >= 9){
                    time = el+`:00`
                    console.log(time);
                }
            }

this.state = {
'val' : time 
};

}
    render(){
        
        return (
            <div className="schedule-page-container">
                {val}
            </div>
        );
    }
}

Everytime the value of val changes, render will be called. So if this is something changing continuously, take a function outside and call it instead of keeping it in constructor.

wisnuaryadipa · Accepted Answer · 2021-05-25 12:41:55Z

Do setState(time) in your condition

   let N = 13;
   let nums = Array.apply(1, { length: N }).map(Number.call, Number)

   console.log(nums)
        for (let el of nums) {
            if (el <= 9) {
                time = `0`+el+`:00`;
                setState(time)
                console.log(time);
    
            }else if(el >= 9){
                time = el+`:00`
                setState(time)
                console.log(time);
            }
        }

After that declare state and render state with this.state.time

  class SchedulePage extends React.Component {
      constructor(props) {
         super(props);
         this.state = {time : ""};
      }
      render(){
    
        return (
          <div className="schedule-page-container">
             {rhis.state.time}
          </div>
      );
      }
  }

Next thing you need to do is when your function triggering to run

foxxycodes · Accepted Answer · 2021-05-25 12:44:00Z

1

import "./styles.css";
import React from "react";

class SchedulePage extends React.Component {
  render() {
    let N = 13;
    let nums = Array.apply(1, { length: N }).map(Number.call, Number);

    function renderTime(nums) {
      let time;
      for (let el of nums) {
        if (el <= 9) {
          time = `0` + el + `:00`;
        } else if (el >= 9) {
          time = el + `:00`;
        }
      }
      return time;
    }

    return <div className="schedule-page-container">{renderTime(nums)}</div>;
  }
}

export default SchedulePage;

answered May 25, 2021 at 12:44

foxxycodes

2632 silver badges6 bronze badges

Comments

Divyanshu Agarwal · Accepted Answer · 2021-05-25 14:22:00Z

1

import React from 'react';
import './style.css';

export default class App extends React.Component {
  state = {
    numLength: 13,
    nums: []
  };

  componentDidMount() {
    let numArray = Array.apply(1, { length: this.state.numLength }).map(
      Number.call,
      Number
    );
    this.setState({ nums: numArray });
  }
  render() {
    return (
      <div className="schedule-page-container">
      
        {this.state.nums.map(el=>{
         return  <>{el <= 9?`0${el}:00`:`${el}:00`}</>
        })}
        
      </div>
    );
  }
}

Try it here: https://stackblitz.com/edit/react-kjqzhx

answered May 25, 2021 at 14:22

Divyanshu Agarwal

496 bronze badges

Collectives™ on Stack Overflow

add number between string then render it in react.js

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related