How to rename Object Keys & change Object values from string to number

Question

Alright, guys.

I am dealing with <TimePicker/> third party library from React and want to manipulate the state so I can push this new format of code into a new object later.

when I target a value using this library, whatever time I pick, my state turns out to be a string like this - e.g if I pick 20:30, this.state.time equals "20:30".

I want to manipulate this string into an object like this:

from "20:30" to time: {hour: 20, minutes: 30} ///both hour and minutes are now numbers

My full code below:

import React from "react";
import TimePicker from "react-time-picker";
import './Clock.css'

class Clock extends React.Component {

    state = {
        time: '0:00',
        pushTime: [],
        value: ''
    };

    onChangeTimePickerHandler = time => {
        this.setState({time});
        let currentTime = this.state.time;
        this.props.CallbackRenderTime(currentTime)
    };

    //I am using TimePicker library for React and want to manipulate the income from the chosen time
    pushNewTimeHandler = () => {
        let time = [...this.state.time] ;// ["1", "0", ":", "0", "0"]
        time.splice(2, 1);
        let timeToOneString = time.join().replace(/,/g, "");
         let prepareStringForNewObject = (value, index) => {
             let array = value.substring(0,index) + ',' + value.substring(index);
             return array.split(',')
         };
        let newObj = {...prepareStringForNewObject(timeToOneString,2)};
        console.log(newObj); // {0: "10", 1: "00"}
    };

    render() {

        return (
            <div>
                <TimePicker
                    onChange={this.onChangeTimePickerHandler}
                    value={this.state.time}/>
                    <button onClick={this.pushNewTimeHandler}>Push the Array of Time</button>
                    <p>{this.state.time}</p>
            </div>


        )
    }
}

export default Clock

So I have been playing around and came with this really ugly part-of-the-issue solution:

 //I am using TimePicker library for React and want to manipulate the income from the chosen time
    manipulateTimeHandler = () => {
        //this.state.time is "10:00"
        let time = [...this.state.time] ;// now it looks like this: ["1", "0", ":", "0", "0"]
        time.splice(2, 1);
        let timeToOneString = time.join().replace(/,/g, "");
         let prepareStringForNewObject = (value, index) => {
             let array = value.substring(0,index) + ',' + value.substring(index);
             return array.split(',')
         };
        let newObj = {...prepareStringForNewObject(timeToOneString,2)};
        console.log(newObj); //finally it became the object, but the object values are still 
                            //strings and the object keys still need to be changed into "hour" 
                           //and "minutes" {0: "10", 1: "00"}
    };

So on my ugly solution pushNewTimeHandler I still need to rename the object keys to hour and minutes and also need to transform the string values for hours and minutes into numbers.

CertainPerformance · Accepted Answer · 2020-02-22 03:36:40Z

1

I'd split the time string by :, creating an array of strings, then map each string to a number, and destructure into hour and minutes on the left of the =. Then you can make an object of hour and minutes:

const str = '20:30';
const [hour, minutes] = str.split(':').map(Number);
const obj = { hour, minutes };
console.log(obj);

answered Feb 22, 2020 at 3:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Collectives™ on Stack Overflow

How to rename Object Keys & change Object values from string to number

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related