How do I convert UUID to number?

Question

I am assigning a UUID to an object.

First I import the UUID package

import {v4 as uuidv4} from 'uuid'

Then I assign the UUID to the 'newFeedback' object.

import React, {useState} from 'react'
import {v4 as uuidv4} from 'uuid'

import Header from './components/Header'
import FeedbackForm from './components/FeedbackForm'
import FeedbackData from './data/FeedbackData'
import FeedbackStats from './components/FeedbackStats'
import FeedbackList from './components/FeedbackList'


function App() {
  const [Data, setData] = useState(FeedbackData)

  const handleDelete = (id) => {
    if (window.confirm('Are you sure you want to delete?')) {
      setData(Data.filter((item) => (item.id !== id)))
    }
  }

  const handleAdd = (newFeedback) => {
    newFeedback.id = uuidv4;
    setData([newFeedback, ...Data]);
  }

  return (
    <>
      <Header/>
      <div className='container'>
        <FeedbackForm onAdd={handleAdd}/>
        <FeedbackStats Data={Data}/>
        <FeedbackList Data={Data} onDelete={handleDelete}/>
      </div>
    </>
  )
}

export default App

import React, {useState} from 'react'
import '../index.css'

import Card from './shared/Card'
import Rating from './Rating'
import Button from './shared/Button'

function FeedbackForm({onAdd}) {
    const [Text, setText] = useState('')
    const [rating, setRating] =useState(0)
    const [btnDisabled, setBtnDisabled] = useState(true)
    const [errorMessage, setErrorMessage] = useState('')


    const handleText = (e) => {
        if (Text === '') {
            setErrorMessage(null)
        }
        else if (Text !== '' && Text.trim().length <= 10) {
            setErrorMessage('Review must be 10 characters or longer')
        }
        else {
            setErrorMessage(null)
            setBtnDisabled(false)
        }

        setText(e.target.value)
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        if (Text.trim().length >=10) {
            const newFeedback = {
                Text: Text,
                rating: rating,
            }
            onAdd(newFeedback);

            setText('')
        }
    }


  return (
    <Card>
        <form onSubmit={handleSubmit}>
            <h2>How would you rate your service with us?</h2>
            <Rating passRating={(rating) => (setRating(rating))}/>
            <div className='input-group'>
                <input 
                    placeholder='Write a review'
                    type='text'
                    value={Text}
                    onChange={handleText}
                />
                <Button type='submit' isDisabled={btnDisabled}>Send</Button>
            </div>
            {errorMessage && <div className='message'>{errorMessage}</div>}
        </form>
    </Card>
  )
}

export default FeedbackForm

import React from 'react'
import PropTypes from 'prop-types'

import FeedbackItem from './FeedbackItem'

function FeedbackList({Data, onDelete}) {
  return (
    <div className='feedback-list'>
        {Data.map((item) => (
            <FeedbackItem key={item.id} item={item} onDelete={onDelete}/>
        ))}
    </div>
  )
}

FeedbackList.propTypes = {
    Data: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.number.isRequired,
            rating: PropTypes.number.isRequired,
            text: PropTypes.string.isRequired,
        })
    ),
}

export default FeedbackList

Then I get this error:

Warning: Failed prop type: Invalid prop Data[0].id of type function supplied to FeedbackList, expected number.

From my understanding, this is due to UUID having too large of a byte compared to the standard PropTypes.number.

Is there any solution to this?

Robby Cornelissen · Answer 1 · 2022-07-21T05:58:59.350

From my understanding, this is due to UUID having too large of a byte compared to the standard PropTypes.number.

Your understanding is incorrect. It's because you're literally assigning the uuidv4 function to your id property:

newFeedback.id = uuidv4;

Probably you meant to do:

newFeedback.id = uuidv4();

That function will return a string value. If you really want to convert that to a number, you'll probably need a Buffer and do the conversion somewhere, e.g. as described here.

How do I convert UUID to number?

1 Answers1