CODEWITHSUNDEEP
javascriptreactjs
Zulzidan.com
Zulzidan.com

Reputation: 456

add number between string then render it in react.js

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>
        );
    }
}

Upvotes: 1

Views: 950

Answers (6)

Ogod
Ogod

Reputation: 948

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>
        );
    }
}

Upvotes: 2

Divyanshu Agarwal
Divyanshu Agarwal

Reputation: 49

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

Upvotes: 1

foxxycodes
foxxycodes

Reputation: 263

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;

Upvotes: 1

wisnuaryadipa
wisnuaryadipa

Reputation: 760

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

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20701

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.

Upvotes: 1

Ali Najafi
Ali Najafi

Reputation: 143

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>
        );
    }
}

Upvotes: 1

Related Questions